navbar boostrap中的活动类更改填充？

Question

它似乎只是在悬停在它上面时添加填充，这使它看起来很傻。

我希望在添加活动时实现完全填充 - 就像悬停在它上面一样。

.nav li {
    border-right: 1px dashed grey;
    padding: 0 10px;
}

.nav > li:hover, .nav > li:active, .nav > li:focus {
    background-color: #E7E7E7;
}

JSFiddle Link

StackOverflow不允许我对答案发表评论。所以我把它放在这里：

是的，第一个anser是正确的，但我希望li彼此之间的距离更远。这就是填充物存在的原因。

Answer 1

将此行css添加到您的样式中：

.nav li.active {
  background-color: #E7E7E7;
}

这将解决您的问题。 这是更新后的JSFiddle

Answer 2

答案是否定的。无论您是否使用活动类，填充在<li>和<a>元素上都保持相同。您可以使用inspect element（chrome）中的计算css选项卡来验证这一点。

您遇到的问题是由于您针对的是错误的类。 然而，解决方案是将以下代码添加到您的css：

.active {
        background-color: #E7E7E7;
}

https://jsfiddle.net/g2jw1zp2/4/

修改 为了进一步澄清这一点，需要添加background-color属性是因为bootstrap中的.active类仅针对<a>标记中的<li>元素的背景颜色，而不是<li>标记自己。你可以在这里的bootstrap源代码的第4032行看到这个：

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Answer 3

<强> JS Fiddle

显示它显然是填充问题。对于活动li引导程序，添加一些填充除填充之外的填充，这将覆盖您的填充。所以你不需要允许bootstrap这样做，你可以在bootstrap之后包含你的css，或者像下面那样添加!important属性。

.nav li a {
    padding: 15px 15px !important;
}

上一个回答：

.nav .active{
    padding: 0;
}

将解决问题。我所理解的是bootstrap.min.css还有一些额外的填充，如下面的截图所示。