twitter-bootstrap 使 Bootstrap 3.0 NavBar 内容始终折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18896591/
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
Make Bootstrap 3.0 NavBar content always collapsed
提问by Martín
I need to make a section of a NavBar of Bootstrap 3.0 always collapsed.
我需要使 Bootstrap 3.0 的 NavBar 的一部分始终折叠。
Actual sections of the navbar:
导航栏的实际部分：
- Links
- Search Form
- Login Form
- 链接
- 搜索表格
- 登录表单
When I open the website in a phone I see the three sections collapsed and I have three icons to collapse each of this content.
当我在手机中打开网站时，我看到三个部分折叠起来，我有三个图标来折叠每个内容。
When I open the page in a PC i see the three sections in the bar visibles (not the buttons to collapse). What I need? In PC view only hide the Login form and show the button to collapse that login form. No matter the resolution i need to have the login button always visible and the section collapsed. This is my actual code:
当我在 PC 中打开页面时，我看到栏中可见的三个部分（不是要折叠的按钮）。我需要的？在 PC 视图中，仅隐藏登录表单并显示折叠该登录表单的按钮。无论分辨率如何，我都需要让登录按钮始终可见并且该部分已折叠。这是我的实际代码：
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<!--Toggles -->
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#sesion">
<span class="glyphicon glyphicon-user"></span>
</button>
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#links" id="menuToggle">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<button type="button" class="navbar-toggle boton"
data-toggle="collapse" data-target="#buscar">
<span class="glyphicon glyphicon-search"></span>
</button>
<!--Logo en vista Mobile -->
<a class="navbar-brand" style="padding: 10px 0 0 15px" href="#">
<span class="visible-xs">
<img src="img/nsnow.png" width="37" height="36" alt="Logo" />
</span>
</a>
</div>
<ul class="collapse navbar-collapse nav navbar-nav" id="links">
<!--Links -->
<li><a style="padding-left: 40px"></a></li>
<li class="botonMenu" id="boton_generos"><a >Géneros</a></li>
<li class="botonMenu" id="boton_categorias"><a >Categorías</a></li>
<li class="botonMenu" id="boton_senales"><a >Se?ales</a></li>
</ul>
<div class="collapse navbar-collapse" id="buscar">
<!--Buscar -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn boton">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
<div class="collapse navbar-collapse" id="sesion">
<!--Buscar -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Usuario">
<input type="text" class="form-control" placeholder="Contrase?a">
</div>
<button type="submit" class="btn boton">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</nav>
回答by cfx
For those using LESS, head to variables.lessand change:
对于那些使用 LESS 的人，请前往variables.less并更改：
@grid-float-breakpoint: @screen-sm-min;
to:
到：
@grid-float-breakpoint: 999999999px;
One line change that works like a charm. Just be sure to use an unrealistically large number of pixels(em did not work for me).
一行更改就像一个魅力。请务必使用不切实际的大量像素（它们对我不起作用）。
回答by hajpoj
You have to override some css to make it stay collapsed
您必须覆盖一些 css 以使其保持折叠状态
http://jsbin.com/UpeZazi/1/edit
http://jsbin.com/UpeZazi/1/edit
In this example i made the "user login" button stay collapsed.
在这个例子中，我让“用户登录”按钮保持折叠状态。
css:
css：
@media (min-width: 768px) {
#login-btn {
display: block;
}
#sesion.collapse {
display: none !important;
}
}
html:
html：
basically the same except i added the id login-btnto your login user button element:
基本相同，除了我将 id 添加login-btn到您的登录用户按钮元素：
<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
<span class="glyphicon glyphicon-user"></span>
</button>
回答by Jo Smo
Try this:
试试这个：
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
回答by nessunluogo
Based on @cfx answer, overriding variable grid-float-breakpoint (which I prefer) using SASS:
基于@cfx 的回答，使用 SASS 覆盖变量 grid-float-breakpoint（我更喜欢）：
$grid-float-breakpoint: 999999999px;
回答by jacvalle
Case you can't change the less variables, you can also override the bootstrap classes after 768px(smartphone bounder). Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.
如果您无法更改 less 变量，您也可以在 768px（智能手机边界）之后覆盖引导程序类。Bellow 是使用下拉菜单覆盖基本导航栏的工作代码。并非所有类都在下面被覆盖，因此根据您使用的内容，您可能需要覆盖其他类。
@media (min-width: 768px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
