使用媒体查询删除 div [重复]

Posted

技术标签:

【中文标题】使用媒体查询删除 div [重复]【英文标题】:Removing a div using media queries [duplicate] 【发布时间】:2018-11-30 16:00:39 【问题描述】:

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

<body>
    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <!-- Image and text -->
             <a class="navbar-brand" href="#"><img  class="d-inline-block align-top"  src="img/SpartanHead.png" ></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;
  

【问题讨论】:

你想隐藏在 768px 以上还是 768px 以下? @charankumar 上面,所以更大的屏幕尺寸 d-inline-block 类将图像设置为display:inline-block !important; !important 是您无法再使用常规 css 隐藏它的原因。有关进一步说明以及如何正确使用引导程序的显示实用程序,请参阅我的答案。 【参考方案1】:

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

改变

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

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

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

更多信息请参见https://getbootstrap.com/docs/4.1/utilities/display/。

【讨论】:

【参考方案2】:

使用!important 防止覆盖 display: none!important;(见小提琴:https://jsfiddle.net/wtyzqkrp/1/)

.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!important;
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <div class="container-fluid">
        <nav class="navbar-expand-lg navbar navbar-light">
            <!-- Image and text -->
             <a class="navbar-brand" href="#"><img  class="d-inline-block align-top"  src="https://material.angular.io/assets/img/examples/shiba1.jpg" ></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>

【讨论】:

是的,谢谢! 如果您标记为答案并投赞成票,真的很高兴 虽然这个答案确实解决了问题,但我想指出的是,使用 css !important 从来都不是,它始终是一个解决方法。一般来说,我建议不惜一切代价避免!important。在某些情况下,您仍然需要它,例如从 javascript 覆盖内联样式您无法更改,但一般来说,imo 的一种健康方法是尽可能远离!important,而只需使用适当的级联 真的...谢谢 @F***Schoner 感谢您提供这些信息,发现它非常有用

以上是关于使用媒体查询删除 div [重复]的主要内容,如果未能解决你的问题,请参考以下文章

CSS打印媒体查询删除空格

按div宽度或高度的CSS媒体查询[重复]

使用媒体查询添加/删除类

基于媒体查询应用 CSS 类 [关闭]

奇怪的 chrome 媒体查询行为

使用媒体查询隐藏背景图像