增加bootstrap导航栏折叠断点,而不会影响同一页面上的其他导航栏

时间:2014-08-31 02:12:22

标签: twitter-bootstrap twitter-bootstrap-3

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

下部有自举"容器"类。在容器内,左侧是导航区域。右侧是内容,其中包含另一个导航栏。这是导航栏的内容。

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

请注意,我删除了直接&#34;容器&#34; &#34; navbar&#34;的孩子在常规导航栏示例中找到,如此链接:http://getbootstrap.com/examples/navbar/。使用此容器时,导航栏与下拉列表不兼容。

到目前为止,导航栏仍在工作,但我希望增加其断点以便崩溃。我在SO上找到了一些相关的帖子,比如

Bootstrap 3 Navbar Collapse

但仍然不知道如何让它在我的情况下工作。我只在这个页面上有这个页内导航栏,而不是整个网站。

2 个答案:

答案 0 :(得分:2)

Bootstrap Documentation

  

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

通常,这会更改所有NavBar的所有断点。因此,BootStrap没有开箱即用的解决方案。我建议创建一组自己的样式,用自定义断点复制NavBars。

答案 1 :(得分:2)

在考虑了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;
        }
    }
}

到目前为止似乎有效。如果我做错了,请告诉我。如果这是对的,希望它可以帮助其他人。

干杯。