仅将 CSS 应用于非折叠菜单答案

【问题标题】：Apply CSS only to non collapsed menu仅将 CSS 应用于非折叠菜单
【发布时间】：2014-08-28 20:51:01
【问题描述】：

我正在尝试将 css 规则应用于我的导航栏菜单，但我不希望它们显示在折叠菜单上。使用我找到的答案here 我尝试了以下方法：

@media (min-width: 980px) {
    /* your conditional CSS*/
}

但是，如果我的浏览器窗口为 900 像素，则不会显示折叠菜单，因此不会显示我的 CSS。这是我的菜单的代码：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header_links">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

        </div>
        <div class="collapse navbar-collapse" id="header_links">
...
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

如何才能可靠地将 CSS 规则仅应用于未折叠的菜单？

【问题讨论】：

你试过在@media (min-width: 900px) {...下应用你的条件css吗？
它实际上直到 768px 才崩溃，所以我猜 min-width: 768px 会为我修复它。我很担心在不同的缩放/浏览器下这个 768 可能会有所不同？
是的。我提到了 900，因为这就是您的问题。缩放时，媒体查询不会受到影响，除非您使用 em。但是对于像素，它们就像你在不同的宽度上一样简单。因此，如果您为这些宽度设计媒体查询，它应该会相应地工作。您可以在此处使用缩放测试您的媒体查询：mediaqueriestest.com
好的，谢谢。那么 768px 是从哪里来的呢？这是折叠菜单的标准引导宽度吗？
这是手机和小型平板电脑的宽度。见here

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

您是否尝试在@media (min-width: 900px) {... 下应用您的条件CSS？

下面是一个示例，它会在导航栏至少 900 像素宽后更改其背景颜色： http://www.bootply.com/Xt0oIHkhjs

【讨论】：