我已经根据 components link 中给出的示例编写了一个导航栏。在 Bootstrap 中。但是导航栏并没有像预期的那样以正确的方式折叠。如下流程所示:
状态 1
状态 2
状态 3
导航栏不是急剧折叠,而是先变成2列再折叠。
我在 stackoverflow 中发现了一个相同的问题.问题似乎是由 bootstrap.conf 中定义的默认断点引起的。但是,我不知道在哪里更改断点以及如何更改。
我使用的是最新的 Bootstrap 版本,下面是我的导航条码片段。
在此先感谢您的帮助和建议!
<!--navigation bar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a><!--end of logo-->
</div><!--end of logo & collapsing logic-->
<div class="collapse navbar-collapse" id="navItems">
<ul class="nav navbar-nav">
<li><a href="#main" class="scroll">HOME</a></li>
<li><a href="#about" class="scroll">ABOUT</a></li>
<li><a href="#work" class="scroll">WORK</a></li>
<li><a href="#blog" class="scroll">BLOG</a></li>
<li><a href="#contact" class="scroll">CONTACT</a></li>
</ul><!--end of menu list-->
<form class="navbar-form navbar-left">
<input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>
</form><!--end of search bar-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>
<li><a href="#"><span class="glyphicon glyphicon-refresh"></span> Update Profile</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>
</ul><!--end of sub menu-->
</li><!--end of dropdown menu-->
</ul><!end of the user account menu-->
</div><!--end of collpased nav-->
</div><!--end of container-->
</nav><!--end of navbar-->
更新
我研究了这个 link 提供的解决方案,这在最新版本的 Bootstrap 中不起作用。
我找到了定义折叠效果断点的代码块:
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
我试图修改定义的最小宽度,但是我改变了,它就是行不通。
最佳答案
我终于明白了:
要在最新版本中执行此操作:
我修改了css文件中的三个部分:
首先您需要设置导航栏标题何时向左浮动(在可能的情况下为 1000 像素):
@media (min-width: 1000px) {
.navbar-header {
float: left;
}
}
然后你需要决定什么时候所有的菜单按钮会消失:
@media (min-width: 1000px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
visibility: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
最后您需要定义 navbar-toggle 何时生效:
@media (min-width: 1000px) {
.navbar-toggle {
display: none;
}
}
然后等待奇迹发生:
当屏幕达到 1000px 阈值时:
来自
到
关于javascript - Bootstrap 导航栏折叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28281616/