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