twitter-bootstrap 禁用 Bootstrap 3 导航栏以中等视口大小移动 2 行

Disable Bootstrap 3 navbar going 2 rows in medium viewport size

提问by Adam Szabo

My Bootstrap 3 navbar is 1 row on a large viewport. Then when I start to shrink the browser window, it switches to 2 row, where the right content ("Hello username", "Log off") is in the second row.

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

Then after more resize, it becomes 1 row again with the menu items disappeared and the menu button present only.

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

How can I skip the 2 row phase?

如何跳过 2 行阶段？

采纳答案by Bass Jobsen

The point (screen width) between the collapsed navbar, menu button only and the horizontal 2 or 1 row navbar is defined by the grid-float-breakpoint.

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

Set this value to a higher value, default value is 768px will skip the 2 row fase. Try 992px, the boundary of the medium grid.

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

To change grid-float-breakpoint you will have two option:

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

• download the source from github, change @grid-float-breakpointin variables.less and recompile bootstrap
• use the customizerand download you own copy

• 从github下载源代码，更改@grid-float-breakpointvariables.less 并重新编译引导程序
• 使用定制器并下载您自己的副本

See also: https://stackoverflow.com/a/18944192/1596547

另见：https: //stackoverflow.com/a/18944192/1596547

UPDATE

更新

by cvrebert on https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244:

作者： cvrebert 在https://github.com/twbs/bootstrap/issues/11539#issuecomment-28805244 上：

Your options are:

您的选择是：

• change the grid float breakpoint so that the navbar stays collapsed until the screen is wide enough for your big navbar
• use responsive utility classesto hide some parts of the navbar at narrower screen widths so that it fits at those widths
• rework your navbar items so that they're shorter / less verbose

• 更改网格浮动断点，以便导航栏保持折叠状态，直到屏幕足够宽以容纳大导航栏
• 使用响应式实用程序类在较窄的屏幕宽度处隐藏导航栏的某些部分，使其适合这些宽度
• 重新设计您的导航栏项目，使它们更短/更简洁

回答by daryl

For what it is worth, here is an idea that makes the navbar items morph from text to an icon based on the current responsive size.

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

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

The result is the 'Contact' text converts into a plus icon at small size. Here's a bootply example

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

回答by Sebapi

An alternative solution which does not involve recompiling bootstrap is adding the following to your css:

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

EDIT about how this works:this instructs the browser to collapse the navbar into a navicon if the media is smaller than some pixel width. You need to set the pixel width appropriately to avoid getting a 2 line navbar. I use this for my website navbar, which I only need to work on chrome/ipad/iphone/samsung mobile. This is arguably a hack but it is simple and easy to test.

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

回答by Wildhammer

You can simply customize the numbers for different setups in _variables.scss bootstrap files. There are different ways you can do this depending on which way you're getting bootstrap library.

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

1. If you're getting it using bootstrap URL then you would have to download it, edit it, and include it to your assets (because you're customizing you need to link to local bootstrap)
2. If you're using some sort of automation for task running (e.g. grunt, gulp) they all have string replace task in which you can simply edit library files by executing a task.

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

回答by Nagibaba

Easiest way. Worked for me. Sass way

最简单的方法。对我来说有效。Sass方式

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

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

回答by gsh

Found a simpler way of reducing the nav bar taking hint from another answer posted somewhere, using white-space:nowrap. Here is what worked well:

找到了一种更简单的方法来减少导航栏从发布在某处的另一个答案中获取提示，使用 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>