如何避免bootstrap 3导航栏折叠成两行

Question

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

http://www.bootply.com/fthRQCpN7d

Answer 1

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

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

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

Answer 2

它正在折叠，因为.container在不同视口大小的宽度上发生了变化。

一些可能的解决方案：

1. 在一个项目上使用自适应实用程序（即.hidden-md）以防止出现此问题。

2. 将.container更改为.container-fluid。

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

3. 将您自己的类添加到<div class="container">并覆盖一个或多个视口大小的width属性。例如：

   @media (min-width: 768px) { ... }
   

Answer 3

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

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

要执行此操作，请转到http://getbootstrap.com/customize/，然后在＆＃34;网格系统＆＃34;部分中，将@grid-float-breakpoint设置为自定义值。单位是像素。

单击＆＃34;编译并下载＆＃34;按钮，在页面的末尾。

Answer 4

由于您已授予.container课程，请使用.container-fluid课程。 要么 给

.container {
      width: 100%;
}