Css 使用媒体查询删除div_Css_Bootstrap 4_Media Queries

Css 使用媒体查询删除div

css bootstrap-4

Css 使用媒体查询删除div,css,bootstrap-4,media-queries,Css,Bootstrap 4,Media Queries,当屏幕大小通过媒体查询增加超过768px时，我试图删除.navbar brand>img，但我没有得到任何运气。我应用于img的样式已被删除，但图像仍保留在同一位置。如果有帮助的话，我正在使用BS4 <body> <div class="container-fluid"> <nav class="navbar-expand-lg navbar navbar-light"> <!-- Image and t

当屏幕大小通过媒体查询增加超过768px时，我试图删除.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 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>

使用！防止覆盖显示的重要信息：无！重要的参见小提琴：

navbar先生{ 背景色：2A2F35；填充：0！重要； } /*导航栏链接*/ .导航栏导航a{ 字体系列：“开放式Sans”，无衬线；字体风格：普通；字体大小：14px；字号：100；字母间距：1px；颜色：ffffff！重要；填充：25px；保证金：0px 25px 0px 25px； } @仅介质屏幕，最大宽度：768px{ .navbar品牌>img{ 宽度：自动；最大高度：90px；利润率：10px 0px 10px 30px； } } @媒体屏幕和最小宽度：768px{ .navbar品牌>img{ 显示：无！重要； } } 使用！防止覆盖显示的重要信息：无！重要的参见小提琴：

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

改变

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

到

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

有关更多信息，请参阅。

只需使用display utility classes Responsive版本即可。您正在将图像设置为display:inline block with class=d-inline-block，只需添加d-md-none即可将其自动设置为display:none on>768px

改变

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

到

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

有关更多信息，请参阅。

要隐藏在768px以上或768px以下吗？@charankumar以上，因此在更大的屏幕尺寸上，d-inline-block类将图像设置为显示：inline block！重要的这个重要的是你不能用常规css隐藏它的原因。请参阅我的答案以了解进一步的解释以及如何正确使用引导的显示实用程序。是否要隐藏在768px以上或768px以下？@charankumar上文，因此在更大的屏幕尺寸上，d-inline-block类将图像设置为显示：inline block！重要的这个重要的是你不能用常规css隐藏它的原因。请参阅我的答案，了解更多解释以及如何正确使用引导的显示实用程序。是的，这很有效，谢谢！真的很感激如果你标记为答案和向上Vote，而这个答案确实解决了问题，我想指出，使用css！重要永远不是好的，它总是一种变通方法。一般来说，我建议避免！无论如何都很重要。尽管如此，在某些情况下您还是需要它，例如，从javascript中覆盖内联样式，您无法更改，但一般来说，imo的健康方法是尽可能远离它！重要的是，使用适当的级联。真的很好。。。thankes@FabianSchoner谢谢你提供的信息，发现它非常有用是的，很有效谢谢！真的很感激如果你标记为答案和向上Vote，而这个答案确实解决了问题，我想指出，使用css！重要永远不是好的，它总是一种变通方法。一般来说，我建议避免！无论如何都很重要。尽管如此，在某些情况下您还是需要它，例如，从javascript中覆盖内联样式，您无法更改，但一般来说，imo的健康方法是尽可能远离它！重要的是，使用适当的级联。真的很好。。。thankes@FabianSchoner谢谢你提供的信息，我觉得非常有用

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