小编Mar*_*rie的帖子

我在网页上展示了一个选项卡菜单。然而，当调整大小时，我遇到了意想不到的行为，因此我的目标是当设备基本上是手机 @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) 时，我想删除这些名称“主页”、“联系人”、“简历”、“作品集”。

这就是我的 @media 查询当前的样子：

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

  #main-header …