Question

我知道这很简单，但是我试图在大于768px的屏幕上隐藏Bootstrap主导航栏时遇到困难。

我不想隐藏<nav>标记。我只想隐藏<div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">...</div>

<nav class="navbar-blue" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header navbar-default">

                <button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- User menu to show on screens < 768px -->
            <div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">
                <ul class="nav navbar-nav client-nav navbar-right">
                    <li><a href="#">My Profile</a></li>
                    <li><a href="#">Account Settings</a></li>
                    <li><a href="#">Sign Out</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

影响你控制这种风格的两件事

为导航栏设置display:block的样式使用!important。您需要使用自己的!important规则
您使用的样式的特异性低于制作display:block的样式。有效的样式是.navbar-collapse.collapse（指定了两个类），而你的样式只是.custom-menu（只有一个类）。

要解决这两个问题，您需要一个类似于此的规则：

@media only screen and (min-width : 768px) {
   .navbar-collapse.custom-menu {
        display: none!important;
    }
}

这将导致菜单隐藏在那些尺寸。

演示：http://jsfiddle.net/4jgL2hfy/

Bootstrap 3：隐藏桌面上的主导航栏

1 个答案: