使用 Bootstrap 对齐导航栏和显示内联块

Question

我在 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

Answer 1

由于li 是display: table-cell，它的高度会由于两行a 而增加。但是，小的as 没有得到相同的高度，所以我认为您可以将:hover 添加到 li 作为 hack 以达到相同的效果。

li:hover {
    background: #EEE;
}

直到你找到更好的解决方案。

Answer 2

将width: 100%; 添加到.nav-justified > li > a。然后它应该覆盖边界之间的整个长度。