Bootstrap 3 Navbar动态折叠

Question

我正在寻找使用bootstrap导航栏调整大小调整问题的解决方案。

目前，导航栏在压缩之前可能会有一种“重叠”效果。 （我知道这是由于媒体查询）

这里使用媒体查询来决定何时紧凑，但是我正在寻找一种解决方案，只有当'.navbar-nav'和'.navbar-right之间没有空间时，导航栏才会调整大小。 ”。

这很重要，因为'.navbar-nav'和'.navbar-right'具有动态宽度。 （换句话说，有时'.navbar-nav'将包含从1个列表项到5个列表项的任何位置。'。navbar-right'类似，因为它是一个文本字符串，可以是3个字符到100个字符之间的任意值很长甚至更长。

下面是一个plunker示例，通过调整预览窗格的大小，您可以看到发生意外的“重叠”（因为它等待满足最大宽度的媒体查询）。

http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview

如果'.navbar-nav'和'.navbar-right'彼此之间没有空间（比如彼此之间的5px空间或类似的东西），我怎么能让它变得紧凑？

（请注意，调整断点不足以实现此目的）

Answer 1

您应该在导航栏上添加自定义类，并在获得高度时更改样式：

<nav id="autocollapse" class="navbar navbar-default" role="navigation">
    ...
</nav>

function autocollapse() {
    var navbar = $('#autocollapse');
    navbar.removeClass('collapsed'); // set standart view
    if(navbar.innerHeight() > 50) // check if we've got 2 lines
        navbar.addClass('collapsed'); // force collapse mode
}

$(document).on('ready', autocollapse);
$(window).on('resize', autocollapse);

#autocollapse.collapsed .navbar-header {
    float: none;
}
#autocollapse.collapsed .navbar-toggle {
    display: block;
}
#autocollapse.collapsed .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#autocollapse.collapsed .navbar-collapse.collapse {
    display: none!important;
}
#autocollapse.collapsed .navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
#autocollapse.collapsed .navbar-nav>li {
    float: none;
}
#autocollapse.collapsed .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

<强> Bootply
的 Forked Plunker

Answer 2

使用jQuery值得一试：

$(document).ready(function() {
    var width_full = $('.navbar-collapse').innerWidth();
    var width_left = $('.navbar-nav').outerWidth(true);
    var width_right = $('.navbar-right').outerWidth(true);
    if (width_full - (width_left + width_right) < 0)
    {
        // trigger collapse, you have to figure out what css changes
        // exactly are needed, for example:
        $('.navbar-toggle').css('display', 'inline');
    }
});

Answer 3

CSS无法自行检测换行，因此您需要重新定义特定宽度的媒体的样式。你的换行似乎发生在910px左右;

Twitter Bootstrap（3）默认情况下将display:none应用于.collapse，然后使用媒体查询将display:block值重新应用于检测视口宽度大于或等于768px宽度：

/* beginning at line 4412 in bootstrap.css,  v3.0.2 */  
@media (min-width: 768px) {

    ... /*other declarations ommitted here */

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    ... /*other declarations ommitted here */
}

因此，您可以使用针对导航栏的几个更具体的媒体查询覆盖此值，以获取需要隐藏它的值范围（介于768px和910px之间）：

@media (min-width: 768px)  and max-width (max-width: 910px){

    #bs-example-navbar-collapse-1{

        display:none !important;
    }

Answer 4

对于bootstrap 3.3.5，zessx回答缺少某些样式。改为使用这些：

    #autocollapse.collapsed .navbar-header {
        float: none;
    }
    #autocollapse.collapsed .navbar-left,.navbar-right {
        float: none !important;
    }
    #autocollapse.collapsed .navbar-toggle {
        display: block;
    }       
    #autocollapse.collapsed .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }       
    #autocollapse.collapsed .navbar-collapse.collapse {
        display: none!important;
    }
    #autocollapse.collapsed .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    #autocollapse.collapsed .navbar-nav>li {
        float: none;
    }
    #autocollapse.collapsed .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #autocollapse.collapsed .collapse.in{
        display:block !important;
    }

还有一件事。 zessx使用50px进行崩溃。将缩放应用于资源管理器时会出现一个圆形问题。例如，导航高度可能是53px，然后菜单将崩溃。我建议将50px值更改为70px。所以这是我的建议：

function autocollapse() {
            var navbar = $('#autocollapse');
            navbar.removeClass('collapsed'); // set standart view
            if (navbar.innerHeight() > 70) // check if we've got 2 lines
                navbar.addClass('collapsed'); // force collapse mode
        }