我在Bootstrap 3中创建了一个合理的导航栏。我的问题是，当我添加display：inline-block垂直对齐我的项目时，活动和可点击区域不再填充边框之间的宽度和高度（请耐心等待我，我的英语很生锈）。
HTML：
<div class="container">
<nav role="navigation" class="navbar-justified">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu produits</span>
<i class="fa fa-bars fa-2x"></i>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-justified">
<li><a href="#">Aliquam bibendum</a></li>
<li><a href="#">Aliquam</a></li>
<li><a href="#">Praesent eros ipsum</a></li>
<li><a href="#">Quisque</a></li>
<li><a href="#">Suspendisse id dapibus</a></li>
<li><a href="#">Nullam consectetur dictum</a></li>
<li><a href="#">Lorem</a></li>
<li><a href="#">Aliquam bibendum</a></li>
</ul>
</div>
</nav>
CSS：
.nav-justified {
text-align: center;
}
.nav-justified > li > a {
color: #2f2f2f;
font-size: 12px;
display:inline-block;
vertical-align:middle;
}
@media (min-width: 768px) {
.nav-justified > li {
border-right: 1px solid #d5d5d5;
}
}
.nav-justified > li:last-child {
border-right: 0;
}
这是一个Bootply链接，可查看运行中的代码：http : //www.bootply.com/Zkl1LHJr1v
添加width: 100%;到.nav-justified > li > a。然后，它应覆盖边界之间的整个长度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句