Twitter bootstrap 增加引导navbar折叠断点，而不影响同一页面上的另一个navbar

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

下面的部分有引导“container”类。在容器内，左侧是一个导航区域。右侧是内容，其中有另一个导航栏。这是我为导航栏准备的

<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 -->

切换导航

请注意，我删除了在普通navbar示例中找到的“navbar”的直接“container”子项，如下链接所示：。使用此容器时，导航栏无法很好地处理下拉列表

到目前为止，导航栏工作正常，但我想增加其崩溃断点。我在某处找到了一些相关的帖子，比如

但我仍然不知道如何让它在我的情况下发挥作用。我在页面导航栏中只有这个，而不是整个站点。

Per

更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid float breakpoint变量或添加您自己的媒体查询

---

通常，这会更改所有导航栏的所有断点。因此，引导没有现成的解决方案。我建议您创建一套自己的样式，用自定义断点复制导航栏。

在考虑Erik的输入后，我想看看是否可以只针对第二个导航栏来自定义引导，似乎我已经成功了

这里是如何。我将第二个导航条包装在一个div中，如下所示：

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

到目前为止，它似乎在起作用。如果我做错了，请告诉我。如果这是正确的，希望它能帮助其他人

---

干杯。

Erik，谢谢你的意见。我可能找到了解决办法。谢谢你的来电！！！

@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;
        }
    }
}