Bootstrap 3 导航栏动态折叠

Question

我正在寻找解决引导程序导航栏调整大小问题的方法。

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

这里使用媒体查询来指示何时压缩，但是我正在寻找一种解决方案，该解决方案仅在 '​​.navbar-nav' 和 '.navbar-right 之间没有剩余空间时才会导致导航栏调整大小'。

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

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

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

只有当 '.navbar-nav' 和 '.navbar-right' 彼此之间没有空间时（例如 .. 彼此之间有 5px 的空间或类似的空间），我怎样才能让它变得紧凑？

（请注意，调整断点是不够的）

Answer 1

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

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

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

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

对于引导程序 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 进行折叠。当您将缩放应用到资源管理器时，会出现一个圆形问题。例如，导航高度可以是 53 像素，然后菜单将折叠。我建议将 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
        }