目前,当浏览器宽度降至768px以下时,导航栏将更改为折叠模式.我想将此宽度更改为1000px,因此当浏览器低于1000px时,导航栏将更改为折叠模式.我想在不使用LESS的情况下这样做,我使用手写笔不是很少.
我的问题与此问题相同:Bootstrap 3 Navbar Collapse
但是这些问题的所有答案都解释了如何通过改变LESS变量来做到这一点.我没有处理过LESS,我正在使用手写笔,所以我想知道如何使用手写笔或其他方法来完成.
谢谢!
当我的导航栏被折叠或者有任何方法让它像小尺寸一样响应时,请帮我改变!
这是我的代码:
<div style="background-color:#e2e2e2; padding-bottom:10px;">
</div>
<div class="container">
<div class="col-lg-10 col-lg-push-1 onhover">
<nav class="navbar-default custom-nav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse1" style="padding:0px;">
<ul class="nav nav-pills onhover">
<li class="active"><a class="onhover1" href="#">Home</a></li>
<li><a class="onhover1" href="#">Rooms</a></li>
<li><a class="onhover1" href="#">Events</a></li>
<li><a class="onhover1" href="#">Restraunts</a></li>
<li><a class="onhover1" href="#">Gallery</a></li>
<li><a class="onhover1" href="#">Services</a></li>
<li><a class="onhover1" href="#">About</a></li>
<li><a class="onhover1" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我需要让Bootstrap 3.0 NavBar的一部分总是崩溃.
导航栏的实际部分:
当我在手机中打开网站时,我看到三个部分已折叠,我有三个图标可以折叠每个内容.
当我在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 --> …Run Code Online (Sandbox Code Playgroud)