我正在寻找一个解决Bootstrap导航栏调整大小问题的方案。
目前，导航栏在变得紧凑之前会产生一种“重叠”的效果。(我知道这是由于媒体查询造成的)
这里使用媒体查询来指示何时要缩小，但我正在寻找一种解决方案，仅当'.navbar-nav'和'.navbar-right'之间没有剩余空间时，导航栏才会调整大小。
这很重要，因为'.navbar-nav'和'.navbar-right'的宽度是动态的。(换句话说，有时'.navbar-nav'将包含1个列表项到5个列表项。'.navbar-right'类似于一个文本字符串，可能长达3个字符甚至更长。
下面是一个plunker示例，通过调整预览窗格的大小，您可以看到意外的“重叠”(因为它等待满足max-width媒体查询)。
http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview
如何使它仅在'.navbar-nav'和'.navbar-right'之间没有空余空间(例如..两者之间有5像素的空间或类似的空间)时变成紧凑形式？
(请注意，调整断点并不能足以实现此目的)
您应该在导航栏上添加自定义类，并在其高度增加时更改样式：
<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;
}
也许可以尝试使用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');
}
});
对于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在折叠时使用了50像素。当你对浏览器应用缩放时，会出现一个圆形问题。导航栏高度可能为53像素，然后菜单就会折叠。我建议将50像素的值更改为70像素。因此，这是我的建议：
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
}
.collapse应用display:none，然后再使用媒体查询将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;
}