html - 带填充的事件类 Bootstrap 菜单

Question

我在 bootstrap 中创建了一个菜单，并在每个点之间进行了填充，因此它不会连续排列，我更喜欢这样。但是我有一些关于事件类的问题。

我在导航栏中的每个 li 元素的左侧和右侧都有 3 个像素的填充，但是当我添加一个事件类时，它不会像我想要的那样工作。在我的事件课上，我希望背景是#fff，而不是#fafafa。当我更改它时，#fafafa 不会消失，#fff 在背景中 - 在我的 li 元素后面。我希望 #fafafa 在事件类中消失，并且背景适合我的 3px 填充。

谢谢你的帮助，希望我能得到一些。

JSFiddle Example

对于此示例，我希望链接位于:

<li class="active1"><a href="#">Forside</a></li>

成为#FFF，没有框阴影(基本上就像我的悬停效果)

Answer 1

如果我正确理解你的问题，这就是你需要更改的 css:

.active1 a { background-color: #fff !important; margin: auto !important; box-shadow: none !important; }

将 a 添加到您的类中会将您的样式应用于 .active1 类中的所有 anchor 元素。

除非绝对必要，否则最好避免使用 !important 关键字。使用特异性来代替样式。

jsFiddle:https://jsfiddle.net/2kt9pvL8/2/