时间戳

首页 > 解决方案 > 使用媒体查询删除 div

css - 使用媒体查询删除 div

问题描述

.navbar-brand>img当屏幕大小使用媒体查询增加超过 768 像素时，我正在尝试删除，但我没有任何运气。我已应用到的样式已img被删除，但图像仍保留在同一位置。如果有帮助，我正在使用 BS4

<body>
    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <!-- Image and text -->
             <a class="navbar-brand" href="#"><img alt="" class="d-inline-block align-top" height="30" src="img/SpartanHead.png" width="30"></a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span></button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="about.html">ABOUT</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</body>

CSS

.navbar {
  background-color: #2A2F35;
  padding: 0 !important;
}
/*Navbar Links*/

.navbar-nav a {
  font-family: 'Open Sans', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 100;
  letter-spacing: 1px;
  color: #ffffff !important;
  padding: 25px;
  margin: 0px 25px 0px 25px;
}

@media only screen and (max-width: 768px) {
  .navbar-brand>img {
      width: auto;
      max-height: 90px;
      margin: 10px 0px 10px 30px;
  }
}

@media screen and (min-width: 768px) {
  .navbar-brand>img {
    display: none;
  }
}

标签： cssbootstrap-4media-queries

解决方案

只需使用显示实用程序类响应版本。您将图像设置为display:inline-blockwith class="d-inline-block"，只需添加d-md-none以自动将其设置为display:none>768px。

改变

<img alt="" class="d-inline-block align-top" height="30" src="img/SpartanHead.png" width="30">

至

<img alt="" class="d-inline-block d-md-none align-top" height="30" src="img/SpartanHead.png" width="30">

而且您不必添加任何自定义 CSS。

有关更多信息，请参阅https://getbootstrap.com/docs/4.1/utilities/display/。

推荐阅读