增加引导程序导航栏折叠断点，而不会影响同一页面上的另一个导航栏

curious1 发表于 Dev

好奇的

我有一页在垂直方向上，它分为两个部分。顶部是导航栏。下部是页面的内容。

下半部分具有引导程序“容器”类。在容器内，左侧是导航区域。内容的右侧是另一个导航栏。这是我的导航栏。

<div class="navbar navbar-default" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="navbar-collapse collapse" id="control-panel">
            <ul class="nav navbar-nav">

                <li class="dropdown">
                    <a href="#" >Menu 1</a>
                </li>               
                <li class="dropdown">
                    <a href="#" >Menu 2</a>
                </li>               
                    <li class="dropdown">
                    <a href="#" >Menu 3</a>
                </li>               


            </ul>

        </div><!--/.nav-collapse -->

</div> <!-- end of  navbar -->

请注意，我删除了在普通导航栏示例中找到的“导航栏”的直接“容器”子级，如以下链接所示：http : //getbootstrap.com/examples/navbar/。使用此容器，导航栏无法与下拉菜单配合使用。

到目前为止，导航栏已经可以使用，但是我想增加其崩溃的断点。我在SO上找到了一些相关的帖子，例如

Bootstrap 3导航栏折叠

但仍然不知道如何使其适用于我的情况。我仅在此页面上拥有此页面内导航栏，而在整个网站范围内都没有。

好奇的

考虑了Erik的意见之后，我在四处逛逛，看看是否可以仅通过定位第二个导航栏来自定义Bootstrap，看来我已经做到了。

这是怎么回事。我将第二个导航栏包裹在div中，如下所示：

<div id="target">
    <div class="navbar navbar-default" role="navigation">
    .....
    </div> <!-- end of  navbar -->
</div>

然后，我遵循了这篇SO帖子中所说的：Bootstrap 3 Navbar Collapse

这是我的最终CSS：

@media (max-width: 991px) {
    #target {

        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }
}