使Bootstrap 3.0 NavBar内容始终折叠 [英] Make Bootstrap 3.0 NavBar content always collapsed
问题描述
我需要使Bootstrap 3.0的NavBar的一部分始终折叠起来.
I need to make a section of a NavBar of Bootstrap 3.0 always collapsed.
导航栏的实际部分:
- 链接
- 搜索表单
- 登录表格
当我用手机打开网站时,我看到三个部分都折叠了,并且我有三个图标可以折叠每个内容.
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.
当我在PC上打开页面时,我会看到可见栏中的三个部分(不是要折叠的按钮).我需要的?在PC视图中,仅隐藏登录"表单并显示按钮以折叠该登录表单.无论分辨率如何,我都需要使登录按钮始终可见并且该部分折叠.这是我的实际代码:
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:
<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>
推荐答案
您必须重写一些CSS以使其保持折叠状态
You have to override some css to make it stay collapsed
http://jsbin.com/UpeZazi/1/edit
在此示例中,我使用户登录"按钮保持折叠状态.
In this example i made the "user login" button stay collapsed.
css:
@media (min-width: 768px) {
#login-btn {
display: block;
}
#sesion.collapse {
display: none !important;
}
}
html:
除了将ID login-btn
添加到您的登录用户按钮元素之外,基本上相同:
basically the same except i added the id login-btn
to your login user button element:
<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
<span class="glyphicon glyphicon-user"></span>
</button>
这篇关于使Bootstrap 3.0 NavBar内容始终折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!