增加 bootstraps 导航栏折叠断点而不影响同一页面上的另一个导航栏 [英] Increase bootstraps navbar collapse breakpoint without affecting another navbar on the same page

问题描述

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

下部具有引导程序容器"类.在容器内，左侧是导航区域.右侧是内容，还有另一个导航栏.这是我的导航栏.

<div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
<div class="navbar-collapse collapse" id="control-panel"><ul class="nav navbar-nav">
<a href="#" >菜单 1</a>
<a href="#" >菜单 2</a>
<a href="#" >菜单 3</a>
</div><!--/.nav-collapse -->

<!-- 导航栏结束 -->

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

到目前为止导航栏可以工作，但我想增加它的崩溃断点.我在 SO 上找到了一些相关的帖子，例如

Bootstrap 3 导航栏折叠

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

解决方案

在考虑了 Erik 的意见之后，我正在四处寻找是否可以通过仅针对第二个导航栏来自定义 Bootstrap，并且似乎我已经使它起作用了.

这就是方法.我将第二个导航栏包裹在一个 div 中，如下所示:

<div class="navbar navbar-default" role="navigation">.....
<!-- 导航栏结束 -->

然后我按照这篇 SO 帖子中的说明进行操作:Bootstrap 3 Navbar Collapse>

这是我的最终 CSS:

@media (max-width: 991px) {#目标 {.navbar-header {浮动:无；}.navbar-toggle {显示:块；}.navbar-collapse {边框顶部:1px 实心透明；box-shadow: 插入 0 1px 0 rgba(255,255,255,0.1);}.navbar-collapse.collapse {显示:无！重要；}.navbar-nav {浮动:无！重要；边距:7.5px -15px；}.navbar-nav>li {浮动:无；}.navbar-nav>li>a {填充顶部:10px；填充底部:10px；}/* 自 3.1.0 */.navbar-collapse.collapse.in {显示:阻止！重要；}.折叠{溢出:隐藏！重要；}}}

到目前为止它似乎工作.如果我做的不对，请告诉我.如果这是正确的，希望它可以帮助其他人.

干杯.

I have a page. Vertically, it has two parts. The top is a navbar. The lower section is the content of the page.

The lower section has the bootstrap "container" class. Within the container, the left-side is a navigation area. The right-side is the content, which has another navbar. Here is what I have for the navbar.

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

Note that I removed the immediate "container" child of "navbar" found in normal navbar examples, as in this link: http://getbootstrap.com/examples/navbar/. With this container, the navbar does not work well with dropdowns.

So far the navbar works, but I would like to increase its breakpoint for collapse. I found a few related posts at SO such as

Bootstrap 3 Navbar Collapse

but still have no idea about how to make it work in my case. I have this within-page navbar only on this page, not site-wide.

解决方案

After considering Erik's input, I was playing around to see whether I could customize Bootstrap by only targeting the second navbar, and it seems that I have made it work.

Here is how. I wrapped the second navbar in a div as bellow:

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

Then I followed what is said in this SO post: Bootstrap 3 Navbar Collapse

Here is my final 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;
        }
    }
}

So far it seems working. If what I did is wrong, please let me know. If this is right, hope it helps someone else.

Cheers.

这篇关于增加 bootstraps 导航栏折叠断点而不影响同一页面上的另一个导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！