CSS Bootstrap 3 - 禁用导航栏折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23535289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - disable navbar collapse
提问by itsme
This is my simple navbar:
这是我的简单导航栏：
<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>
I just would like to prevent this to collapse, cause I don't need it, how to do?
我只是想防止它崩溃，因为我不需要它，怎么办？
I would like to avoid writing 300K lines of CSS for overriding the default styles.
我想避免编写 30 万行 CSS 来覆盖默认样式。
Any suggestion?
有什么建议吗？
回答by AyB
After close examining, not 300k lines but there are around 3-4 CSS properties that you need to override:
仔细检查后，不是 300k 行，而是需要覆盖大约 3-4 个 CSS 属性：
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
And with this your menu won't collapse.
有了这个，你的菜单就不会崩溃了。
EXPLANATION
解释
The four CSS properties do the respective:
这四个 CSS 属性分别执行：
The default
.collapseproperty in bootstrap hides the right-side of the menu for tablets(landscape) and phones and instead a toggle button is displayed to hide/show it. Thus this property overrides the default and persistently shows those elements.For the right-side menu to appear on the same line along with the left-side, we need the left-side to be floating left.
This property is present by default in bootstrap but not on tablet(portrait) to phone resolution. You can skip this one, it's likely to not affect your overall navbar.
This keeps the right-side menu to the right while the inner elements (
li) will follow the property 2. So we have left-side float leftand right-side float rightwhich brings them into one line.
.collapsebootstrap 中的默认属性隐藏了平板电脑（横向）和手机菜单的右侧，而是显示了一个切换按钮来隐藏/显示它。因此，此属性会覆盖默认值并持续显示这些元素。为了让右侧菜单与左侧出现在同一行，我们需要左侧浮动。
默认情况下，此属性存在于引导程序中，但不存在于平板电脑（纵向）到手机分辨率中。你可以跳过这个，它可能不会影响你的整体导航栏。
这使右侧菜单保持在右侧，而内部元素 (
li) 将遵循属性 2。因此我们将左侧浮动左侧和右侧浮动右侧将它们合并为一行。
回答by Gagan Gami
The nabvar will collapse on small devices. The point of collapsing is defined by @grid-float-breakpointin variables. By default this will by before 768px. For screens below the 768pixels screen width, the navbar will look like:
nabvar 将在小型设备上崩溃。折叠点由@grid-float-breakpointin 变量定义。默认情况下，这将在 before 768px。对于低于768像素屏幕宽度的屏幕，导航栏将如下所示：
It's possible to change the @grid-float-breakpointin variables.less and recompile Bootstrap. When doing this you also will have to change @screen-xs-maxin navbar.less. You will have to set this value to your new @grid-float-breakpoint -1. See also: https://github.com/twbs/bootstrap/pull/10465. This is needed to change navbar forms and dropdowns at the @grid-float-breakpoint to their mobile version too.
可以@grid-float-breakpoint在 variables.less 中更改并重新编译 Bootstrap。这样做时，您还必须@screen-xs-max在 navbar.less 中进行更改。您必须将此值设置为新的@grid-float-breakpoint -1. 另见：https: //github.com/twbs/bootstrap/pull/10465。这也是将@grid-float-breakpoint 处的导航栏表单和下拉菜单更改为移动版本所必需的。
Easiest way is to customize bootstrap
find variable:
查找变量：
@grid-float-breakpoint
which is set to @screen-sm, you can change it according to your needs. Hope it helps!
设置为@screen-sm，您可以根据需要更改它。希望能帮助到你！
For SAAS Users
SAAS用户
add your custom variables like $grid-float-breakpoint: 0px;before the @import "bootstrap.scss";
像$grid-float-breakpoint: 0px;之前一样添加您的自定义变量@import "bootstrap.scss";
回答by Jeremy Cook
Here's an approach that leaves the default collapse behavior unchanged while allowing a new section of navigation to always remain visible. Its an augmentation of navbar; navbar-header-menuis a CSS class I have created and is not part of Bootstrap proper.
这是一种保持默认折叠行为不变的方法，同时允许新的导航部分始终保持可见。它是对navbar; navbar-header-menu是我创建的 CSS 类，不是 Bootstrap 的一部分。
Place this in the navbar-headerelement after navbar-brand:
将它放在navbar-header元素之后navbar-brand：
<div class="navbar-header-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">I'm always visible</a></li>
</ul>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
Add this CSS:
添加这个CSS：
.navbar-header-menu {
float: left;
}
.navbar-header-menu > .navbar-nav {
float: left;
margin: 0;
}
.navbar-header-menu > .navbar-nav > li {
float: left;
}
.navbar-header-menu > .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-header-menu > .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
width: auto;
margin-top: 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.navbar-header-menu > .navbar-form {
float: left;
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-header-menu > .navbar-form > .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-header-menu > .navbar-left {
float: left;
}
.navbar-header-menu > .navbar-right {
float: right !important;
}
.navbar-header-menu > *.navbar-right:last-child {
margin-right: -15px !important;
}
Check the fiddle: http://jsfiddle.net/L2txunqo/
检查小提琴：http: //jsfiddle.net/L2txunqo/
Caveat: navbar-rightcan be used to sort elements visually but is not guaranteed to pull the element to the furthest right portion of the screen. The fiddle demonstrates that behavior with the navbar-form.
警告：navbar-right可用于在视觉上对元素进行排序，但不能保证将元素拉到屏幕最右侧的部分。小提琴用navbar-form.
回答by Michael Ribbons
If you're not using the less version, here is the line you need to change:
如果您没有使用 less 版本，这里是您需要更改的行：
@media (max-width: 767px) { /* Change this to 0 */
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
}
回答by Cristi Draghici
The following solution worked for me in Bootstrap 3.3.4:
以下解决方案在 Bootstrap 3.3.4 中对我有用：
CSS:
CSS：
/*no collapse*/
.navbar-collapse.collapse.off {
display: block!important;
}
.navbar-collapse.collapse.off ul {
margin: 0;
padding: 0;
}
.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
float: left !important;
}
.navbar-right.no-collapse {
float: right!important;
}
then add the .no-collapseclass to each of the lists and the .offclass to the main container. Here is an example written in jade:
然后将.no-collapse类添加到每个列表，将.off类添加到主容器。这是一个用玉写的例子：
nav.navbar.navbar-default.navbar-fixed-top
.container-fluid
.collapse.navbar-collapse.off
ul.nav.navbar-nav.no-collapse
li
a(href='#' class='glyph')
i(class='glyphicon glyphicon-info-sign')
ul.nav.navbar-nav.navbar-right.no-collapse
li.dropdown
a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
| Tools
span.caret
ul.dropdown-menu(role='menu')
li
a(href='#') Tool #1
li
a(href='#')
| Logout
回答by digout
Another way is to simply remove collapse navbar-collapsefrom the markup. Example with Bootstrap 3.3.7
另一种方法是简单地collapse navbar-collapse从标记中删除。Bootstrap 3.3.7 示例
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-atp">
<div class="container-fluid">
<div class="">
<ul class="nav navbar-nav nav-custom">
<li>
<a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Nav item</li>
</ul>
</div>
</div>
</nav>