我试过这个例子:
html
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
CSS
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
来自此页面:Center content in responsive bootstrap navbar
我想像这样为导航列表项添加悬停效果:
http://jsfiddle.net/bdd9U/560/
但在底部它有一些额外的高度并且悬停效果不能占用足够的空间。如果我们将屏幕调整为移动尺寸,我们可以看到标题高度从底部减少了大约 5 像素。如何修复这个问题?
最佳答案
看起来 display: inline-block
在导航栏元素之后添加了空格。
您可以为导航栏设置固定高度。
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
height: 45px; /* Add */
}
}
已更新 JSfiddle
关于javascript - Bootstrap 3 导航列表项悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31466149/