Bootstrap - 將像素邊框添加到菜單上的活動鏈接

我正在設置導航菜單的樣式，但遇到了一些麻煩。在移動模式下，我選擇了家，畫廊懸停，如下圖所示。Bootstrap - 將像素邊框添加到菜單上的活動鏈接

不過，我希望這是他們之間運行的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的邊框，我認爲這是重點鏈接。

來源

2017-07-08 Aaraeus

在你的HTML標記應用ID上的活動力和CSS媒體規則針對李＃ID和應用底部邊框：1px的固體＃7A292A;

HTML：

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

CSS：

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

注：請確保您根據您的CSS媒體規則在觀看分辨率。

來源

2017-07-08 13:09:44

這個工作，但我還是不明白_why_它的工作。作爲參考，我已經在我的活動鏈接的HTML標記中有一個類，所以我將CSS更改爲'li.active'，它工作正常......但我仍然不知道爲什麼。你能否更詳細地解釋一下？ – Aaraeus

如果有效，請接受我的回答。可能的原因是它不起作用可能是css的特殊性，可能會有一個特定的css規則被聲明來替代你的格式。使用開發工具來找出問題。我想你應該看看這篇文章https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ –

添加這一點，看看是否能工程：

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

來源

2017-07-08 13:20:34 Gyan

Bootstrap - 將像素邊框添加到菜單上的活動鏈接

回答

相關問題