如何避免引导 3 导航栏折叠成两行答案

【问题标题】：how to avoid bootstrap 3 nav bar collapsing into two rows如何避免引导 3 导航栏折叠成两行
【发布时间】：2014-06-28 13:15:19
【问题描述】：

当我将窗口大小调整为中等大小时，右侧的两个链接折叠并导致导航栏占据两行，即使右侧链接和左侧链接之间有足够的空间。

【问题讨论】：

我遇到了同样的问题。我没有找到真正的解决方案来修复它……相反，我更改了.less 文件中的@grid-float-breakpoint 值，以使导航栏在显示这两行布局之前折叠。
...甚至认为有足够的空间... 这不是真的。当窗口到达 992 断点时，也就是您的问题出现的时候，您的 .container 宽度会缩小，并且不再有足够的空间。
stackoverflow.com/questions/20012665/…的可能重复

【解决方案1】：

您可以编写一个@media-query 来减少遇到问题断点时的左/右填充：

@media(max-width:992px){
.nav>li>a {
padding-left: 10px;
padding-right:10px
    }
}

可能不适用于每个实例，但似乎适用于您的示例：http://www.bootply.com/fthRQCpN7d

【讨论】：

【解决方案2】：

它正在崩溃，因为 .container 在不同的视口大小处宽度会发生变化。

一些可能的解决方案：

将.container 更改为.container-fluid。

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
  .....
  </div>
</div>

将您自己的类添加到<div class="container"> 并覆盖一个或多个视口大小的宽度属性。例如：
```
@media (min-width: 768px) { ... }
```

【讨论】：

【解决方案3】：

折叠点取决于@grid-float-breakpoint 值。

您必须下载自定义版本的 Bootstrap。

为此，请转到http://getbootstrap.com/customize/，然后在“网格系统”部分中，将@grid-float-breakpoint 设置为自定义值。单位是像素。

点击页面末尾的“编译和下载”按钮。

【讨论】：

【解决方案4】：

既然你已经给了.container 类，请使用.container-fluid 类。或者给

.container {
      width: 100%;
}

【讨论】：