Bootstrap 3 Navbar动态折叠 [英] Bootstrap 3 Navbar Dynamic Collapse

问题描述

我正在寻找一个解决方案来调整大小问题与bootstrap的navbar。

I am searching for a solution to a resizing issue with bootstrap's navbar.

目前一个导航栏可以有一种重叠的效果，然后被压缩。 （我知道这是由于媒体查询）

Currently a navbar can have a sort of 'overlapping' effect before becoming compacted. (I am aware that this is due to media queries)

这里使用媒体查询来决定什么时候紧凑，但我正在寻找一个解决方案，导致navbar只调整当'.navbar-nav'和'.navbar-right'之间没有剩余空间。

Media queries are being used here to dictate when to go compact, however I am looking for a solution that will cause the navbar to resize ONLY when there is no room left between '.navbar-nav' and '.navbar-right'.

这很重要，因为'.navbar-nav'和'.navbar -right'有动态宽度。 （换句话说，有时'.navbar-nav'将包含从1个列表项到5个列表项的任何地方。'.navbar-right'是相似的，因为它是一个文本字符串，可以是从3个字符到可能100个字符

This is significant because '.navbar-nav' and '.navbar-right' have dynamic widths. (in other words sometimes '.navbar-nav' will contain anywhere from 1 list item to 5 list items. '.navbar-right' is similar in that it is a string of text that could be anywhere from 3 characters to potentially 100 characters long or even longer.

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

Below is a plunker example where by resizing the preview pane, you can see the unintended 'overlapping' taking place (as it waits for the max-width media query to be met).

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

如果只有当'.navbar-nav'和'.navbar-右边没有相互之间的空间（说...彼此之间的空间或类似的东西。）

How can I have it become compacted only when '.navbar-nav' and '.navbar-right' have no room between each other (say.. 5px of space between each other or something similar)?

（请注意，调整断点是

(please note, adjusting the break points is not enough to accomplish this)

推荐答案

您应该在导航栏上添加自定义类，它获得高度：

You should add a custom class on your navbar, and change the style when it gain height :

<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

Bootply
Forked Plunker

这篇关于Bootstrap 3 Navbar动态折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！