Question

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

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

但是，如果我的浏览器窗口为900px，则不会显示折叠的菜单，因此我的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规则应用到我的菜单中？

Answer 1

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

这是一个示例，一旦导航栏的宽度至少为900px，它就会改变导航栏的背景颜色： http://www.bootply.com/Xt0oIHkhjs

仅将CSS应用于非折叠菜单

1 个答案: