Question

我的Bootstrap 3导航栏在大视口上是1行。然后，当我开始缩小浏览器窗口时，它会切换到2行，其中正确的内容（“Hello username”，“Log off”）位于第二行。

然后在更多调整大小后，它再次变为1行，菜单项消失，菜单按钮仅出现。

如何跳过2行阶段？

Answer 1

对于它的价值，这里有一个想法，使导航条项目根据当前的响应大小从文本变为图标。

<li><a href="#contact"><div class="hidden-sm">Contact<b class="caret"></b></div><span class="glyphicon glyphicon-plus visible-sm"></span></a></li>

结果是“联系人”文本转换为小尺寸的加号图标。这是一个bootply example

Answer 2

折叠导航栏，仅菜单按钮和水平2或1行导航栏之间的点（屏幕宽度）由grid-float-breakpoint定义。

将此值设置为更高的值，默认值为768px将跳过2行fase。尝试992px，中间网格的边界。

要更改grid-float-breakpoint，您将有两个选项：

从github下载源代码，在variables.less中更改@grid-float-breakpoint并重新编译bootstrap
使用customizer并下载您自己的副本

另请参阅：https://stackoverflow.com/a/18944192/1596547

<强>更新

来自https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244的cvrebert：

您的选择是：

更改网格浮点断点，以便导航栏保持折叠状态，直到屏幕宽度足以容纳您的大导航栏

使用responsive utility classes以较窄的屏幕宽度隐藏导航栏的某些部分，使其适合这些宽度

重新设计导航栏项目，使其更短/更简洁

Answer 3

不涉及重新编译引导程序的替代解决方案是将以下内容添加到您的css中：

@media (max-width: 950px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

关于其工作原理的编辑：，如果媒体小于某个像素宽度，则指示浏览器将导航栏折叠为导航图形。您需要适当设置像素宽度以避免获得2行导航栏。我将它用于我的网站导航栏，我只需要在chrome / ipad / iphone / samsung mobile上工作。这可以说是一个黑客攻击，但它很容易测试。

Answer 4

使用white-space：nowrap，找到了一种简单的方法来减少导航条从某处发布的另一个答案中提示。这是有效的：

<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-ex1-collapse" style="width:100%;float:none;position:relative;">
        <ul class="nav navbar-pills nav-justified" role="navigation" style="width:auto;white-space: nowrap;">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                </ul>
            </li> ...
           </ul>
      </div>
</div>

Answer 5

您可以在_variables.scss引导文件中自定义不同设置的数字。根据您获取引导程序库的方式，有不同的方法可以执行此操作。

如果您使用bootstrap URL获取它，则必须下载，编辑并将其包含在您的资产中（因为您需要自定义链接到本地引导程序）
如果您正在使用某种自动化来运行任务（例如grunt，gulp），那么它们都有字符串替换任务，您可以通过执行任务来编辑库文件。

Answer 6

最简单的方法。为我工作。 Sass方式

.navbar-nav>li float: left .navbar-header float: left .navbar-right float: right!important

禁用Bootstrap 3导航栏以中等视口大小运行2行

6 个答案: