我想向导航栏添加一个下拉菜单,但请确保当浏览器调整为更窄的宽度时,下拉菜单在导航栏中保持可见,并且不包含在导航折叠中。
下面的 html 有效。然而,当页面大小调整时,下拉菜单会下降到下一行,并在导航栏中显示展开,从而留下一个非常深的导航栏。
我正在调用 bootstrap-collapse.js 和 bootstrap-dropdown.js。
有人有什么想法吗?
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="container">
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sharing<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
根据马克·奥托的说法,引导程序的开发人员之一:
导航栏中 .nav 内的所有下拉菜单都会受到影响。目前我们不提供阻止这种行为的方法。
但是,折叠的导航栏中可以有未折叠的下拉菜单。您可以通过以下三种方式之一来完成此操作:
- 将数据属性添加到下拉列表(
data-no-collapse="true"
)来修复响应式选择器。
- 替换下拉菜单的类(
class="dropdown-menu-no-collapse"
)从头开始重建其风格。
- 将另一个类添加到下拉列表中(
class="dropdown-menu no-collapse
) 覆盖响应式样式。
我写了一篇博文这解释了该怎么做。第一种方法需要编辑bootstrap-responsive.css
,第二个需要改变bootstrap.css
。对于第三种方法,您不必更改引导程序的任何 CSS,但它很难维护。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)