簡體   English   中英

刪除文字,只在@media(min-width: 768px) 下留下圖標

[英]Remove text and only leave icon under @media(min-width: 768px)

我在我的網頁上顯示了一個選項卡菜單。 然而,當調整大小時,我遇到了一個意想不到的行為,因此我的目標是刪除文本並只留下 fa 圖標,當設備是手機時,基本上@media(min-width:768px)。

這是菜單的樣子:

<div>
          <div class="d-flex flex-row text-white align-items-stretch text-center">
            <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
              <i class="fa fa-home d-block"></i> Home
            </div>
            <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
              <i class="fa fa-graduation-cap d-block"></i> Resume
            </div>
            <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
              <i class="fa fa-folder-open d-block"></i> Portfolio
            </div>
            <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
              <i class="fa fa-envelope d-block"></i> Contact
            </div>
          </div>
        </div>

當設備為@media@media(min-width:768px) 時,我想刪除這些名稱 Home、Contact、Resume、Portfolio。

這是我的@media 查詢當前的樣子:

   @media (max-width: 768px) {
  #main-header .port-item {
    width: 25%;
  }

  #main-header .port-item .fa {
    font-size: 1em;
  }

  .map-responsive {
    margin-top: 15px;
  }
}

這是我所指的圖片:

在此處輸入圖片說明

在文本周圍添加一個 span 標簽,並使其在媒體查詢中display: none ,例如@media (max-width: 768px)

HTML:

<div>
  <div class="d-flex flex-row text-white align-items-stretch text-center">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
      <i class="fa fa-home d-block"></i> <span class="item-label">Home</span>
    </div>
    <div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
      <i class="fa fa-graduation-cap d-block"></i> <span class="item-label">Resume</span>
    </div>
    <div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
      <i class="fa fa-folder-open d-block"></i> <span class="item-label">Portfolio</span>
     </div>
     <div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
       <i class="fa fa-envelope d-block"></i> <span class="item-label">Contact</span>
     </div>
  </div>
</div>

CSS:

@media (max-width: 768px) {
  #main-header .port-item {
    width: 25%;
  }
  #main-header .port-item .fa {
    font-size: 1em;
  }
  .map-responsive {
    margin-top: 15px;
  }
  #main-header .port-item .item-label {
    display: none;
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM