Bootstrap 2和Bootstrap 3的最大区别在于，Bootstrap 3是“移动优先”。

这意味着默认样式是为移动设备设计的，在导航栏的情况下，这意味着它在默认情况下是“折叠”的，当它达到一定的最小尺寸时是“展开”的。

Bootstrap 3的网站实际上有一个关于该怎么做的“提示”: http://getbootstrap.com/components/#navbar

自定义崩溃点 根据导航栏中的内容，您可能需要更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加自己的媒体查询。

如果您要重新编译您的LESS，您将在变量中找到注意的LESS变量。更少的文件。它目前被设置为“扩展”@media (min-width: 768px)，这是一个“小屏幕”(即。一个平板电脑)由Bootstrap 3项。

@grid-float-breakpoint: @screen-tablet;

如果你想保持折叠的时间长一点，你可以这样调整:

@grid-float-breakpoint: @screen-desktop;(992 px断点)

或者更快地扩张

@grid-float-breakpoint: @screen-phone (480px断点)

如果你想让它在以后展开，而不是重新编译LESS，你将不得不覆盖在768px媒体查询中应用的样式，并让它们返回到之前的值。然后在适当的时候重新添加它们。

我不确定是否有更好的办法。根据需要重新编译Bootstrap LESS是最好(最简单)的方法。否则，你将不得不找到所有的CSS媒体查询，影响你的导航栏，覆盖他们默认样式@ 768px宽度，然后恢复他们在一个更高的min-width。

重新编译LESS只需要改变变量就可以实现所有这些神奇的功能。这就是LESS/SASS预编译器的意义所在。=)

(注意，我确实把它们都查了一遍，大约有100行代码，这让我放弃了这个想法，只是为给定的项目重新编译Bootstrap，避免意外地搞砸一些事情)

nabvar会在小型设备上崩溃。折叠点由变量中的@grid-float-breakpoint定义。默认情况下，它将在768px之前。对于屏幕宽度低于768像素的屏幕，导航栏看起来是这样的:

可以在变量中更改@grid-float-breakpoint。并重新编译引导程序。当这样做时，你还必须改变navbar.less中的@screen-xs-max。您必须将这个值设置为新的@grid-float-breakpoint -1。参见:https://github.com/twbs/bootstrap/pull/10465。这是需要改变导航栏形式和下拉菜单在@grid-float-breakpoint到他们的移动版本。

感谢Seb33300，我得到了这个工作。然而，一个重要的部分似乎被遗漏了。至少在Bootstrap 3.1.1版本中是这样。

我的问题是，导航栏在正确的宽度上相应地折叠，但菜单按钮不起作用。我无法展开和折叠菜单。

这是因为崩溃。In类被.navbar-collapse中的!important重写。也可以通过添加“Collapse .in”来解决。Seb33300的例子完成如下:

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

我想对jmbertucci的回答进行投票和评论，但我还不能被信任。我也遇到了同样的问题，并按照他说的解决了。如果你使用Bootstrap 3.0，编辑变量中的LESS变量。响应断点设置在第200行左右:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

然后在第232行左右使用@grid-float-breakpoint变量为导航栏设置折叠值。默认设置为@screen-tablet。如果你愿意，你可以使用像素值，但我更喜欢使用LESS变量。

如果您面临的问题是菜单分解成多行，您可以尝试以下方法之一:

1)尽量减少菜单项的数量或长度，如删除菜单项或缩短单词。

2)减少菜单项之间的填充，就像这样:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

默认填充两边15px(左右)。

如果您更喜欢改变每个单独的用途:

padding-left: 7px; 
padding-right: 8px;

此设置也会影响下拉列表。

这并没有回答问题，但它可以帮助那些不想乱动CSS或使用LESS变量的人。解决这个问题的两种常见方法。

这些都是在变量中控制的，不需要在源代码中瞎折腾。使用自举，首先尝试变量，然后重写。然后返回并再次尝试变量;)

我使用bootstrap-sass与rails，但它与默认的LESS是一样的。

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

就是这样!这个变量参考页面非常方便:https://github.com/twbs/bootstrap/blob/master/less/variables.less