Question

我在我的网页上有一个标签菜单。但是，在调整大小时我遇到了意外行为，因此我的目标是删除文本，并在设备基本上是@media（min-width：768px）时只保留fa图标。

菜单如下：

<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;
  }
}

以下是我所指的内容：

Answer 1

在文字周围添加范围标记，并在媒体查询中设置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;
  }
}

删除文本，只留下@media下的图标（min-width：768px）

1 个答案: