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

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变量的人。解决这个问题的两种常见方法。

对于那些想要在小于标准768px的宽度处折叠(在小于768px的宽度处展开)的人，这是需要的css:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

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

我使用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

我很关心自定义Bootstrap之后的维护和升级问题。我可以在今天编写定制步骤的文档，并希望三年后升级Bootstrap的人能够找到文档并重新应用这些步骤(在那时可能工作，也可能不工作)。我认为这两种方法都可以，但我更喜欢在代码中保留任何自定义。

不过，我不太明白Seb33300的方法是如何起作用的。当然，Bootstrap 4.0.3不能正常工作。为了使导航栏扩展到1200而不是768，必须重写媒体查询的规则，以防止扩展到768和强制扩展到1200。

我有一个更长的菜单，可以在iPad的纵向模式下自动换行。 下面将菜单一直折叠到1200断点:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

我想对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变量。

我用CSS的方式安装Bootstrap 3.0.0，因为我不太熟悉LESS。下面是我添加到我的自定义css文件(我在bootstrap.css后加载)的代码，它允许我控制，所以菜单总是像手风琴一样工作。 注意:我将整个导航栏与类边栏一起包装在一个div中，以分离出我想要的行为，这样它就不会影响我网站上的其他导航栏，比如主菜单。根据您的需要进行调整，希望对您有所帮助。

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

附加说明:我还对主菜单导航栏的切换进行了更改(因为我网站上的代码用于侧面的“子菜单”)。

我改变了:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

成:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

然后调整:

<div class="navbar-collapse collapse navbar-collapse">

成:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

如果你只有一个导航栏，我猜你不需要担心这个，但它在我的情况下帮助了我。