Bootstrap - 为菜单上的活动链接添加像素边框

Question

我正在设计导航菜单的样式，但遇到了一些问题。在移动模式下，我选择了主页，并且画廊悬停在下面，如下图所示。

但是，我希望它们之间有一个 1 像素的边框。我有以下 CSS：

/* Small Devices, Tablets */
@media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #transparent;  border: 1px; border-color: #7A292A;}
.collapsing .in ul li a {color: #DEE0A3!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #9D343D!important; border: 1px; border-color: #7A292A;}
.collapsing ul li a:focus, .in ul li a:focus {background-color: #000 !important;}
}

但它不起作用。有任何想法吗？我想我想在当前活动导航链接的底部有一个 1px 的边框，我认为这是焦点链接。

Answer 1

在您的 HTML 标记中，在活动 li 上应用 id，在 css 媒体规则中以 li#id 为目标并应用 border-bottom: 1px solid #7A292A;

HTML：

<ul>
    <li id="active">Home</li>
    <li>Gallery</li>
</ul>

CSS：

li#active{ border-bottom: 1px solid #7A292A;}

注意：确保您以符合您的 CSS 媒体规则的分辨率观看。

Answer 2

添加这个，看看是否有效：

 .collapsing ul li a:active, .in ul li a:active {border-bottom: 1px solid #000 !important;}