Twitter bootstrap 禁用引导3导航栏以中等视口大小移动2行

我的Bootstrap 3导航栏在一个大视口中为一行。然后，当我开始缩小浏览器窗口时，它会切换到第2行，第二行是正确的内容（“Hello用户名”、“注销”）

然后在进一步调整大小后，它再次变为1行，菜单项消失，菜单按钮仅显示

如何跳过两行阶段？

折叠导航栏（仅菜单按钮）和水平2行或1行导航栏之间的点（屏幕宽度）由网格浮动断点定义

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

要更改网格浮动断点，您将有两个选项：

• 从下载源代码，更改variables.less中的网格浮点断点，然后重新编译引导
• 使用并下载您自己的副本

另见：

更新

由cvrebert于：

你的选择是：

• 更改网格浮动断点，使导航栏保持折叠状态，直到屏幕宽度足以容纳大导航栏
• 用于以较窄的屏幕宽度隐藏导航栏的某些部分，以使其适合这些宽度
• 修改导航栏项目，使其更短/更少冗长

---

值得一提的是，这里有一个想法，使导航栏项目从文本变形为基于当前响应大小的图标

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

---

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

发现了一种更简单的减少导航条的方法，从某个地方发布的另一个答案中获取提示，使用空白：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>

。。。

另一种不涉及重新编译引导的解决方案是将以下内容添加到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;
    }
}

---

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

您可以在_variables.scss引导文件中自定义不同设置的编号。 根据获取引导库的方式不同，可以采用不同的方法

如果您使用引导URL获取它，那么您必须下载它，编辑它，并将其包含到您的资产中（因为您要自定义它，您需要链接到本地引导）

如果您正在使用某种自动化来运行任务（例如grunt、gulp），它们都有字符串替换任务，您可以通过执行任务简单地编辑库文件

---

最简单的方法。为我工作。萨斯路

.navbar nav>li
浮动：左
.导航栏标题
浮动：左
.导航栏对吗
浮子：对！重要提示

这个答案为我解决了同样的问题，应该接受。好主意。我找不到更好的答案。我发现这真的很有效。这是一个很棒的主意！当然，只要图标是“描述性”的，就足够聪明了。很好。也许你可以对它的作用做一些解释？甚至可以提供一个JSFIDLE？用于我的Bootstrap3.3.7。但是，对于标准引导，您需要一个断点991->@media（最大宽度：991px）{适合我，想看看代码的一些解释吗