Bootstrap3具有下劃線的導航鏈接樣式

我正在尋找使用下劃線在Youtube中調整Bootstrap菜單的樣式。Bootstrap3具有下劃線的導航鏈接樣式

enter image description here

到目前爲止，我已經做了下面的代碼，但沒有達到效果， 邊框底部不工作了：活躍。

我已經在引導CSS後添加了我的CSS，所以沒有覆蓋的可能性，但仍然無法正常工作。

樣式CSS

a { 
    color: black; 
} 


.navbar-nav>li>a:hover , 
.navbar-nav>li>a:active { 
    border-bottom: 2px solid #ad1f2d!important; 
}

HTML代碼

<div class="navbar" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       @*<a class="navbar-brand" href="#"><img src="../../img/logo.jpg" alt="77 Markets" height="100" width="100" style="margin-left: -10px; margin-right: 20px"></a>*@ 
      </div> 
      <div class="navbar-collapse navbar-right collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>      
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div> 
     </div> 
    </div>

來源

2014-06-11 ineffable p

-1

一個建議，我希望我沒有錯。你有沒有嘗試爲所有元素指定邊框？它工作嗎？我在考慮強調效果和邊框底線互相抵消。還請檢查bootsrap CSS文件，因爲如果您的自定義CSS包含後指定了CSS文件，它可能會取消您的自定義CSS。

來源

2014-06-11 08:43:48

我在引導後添加了我的css。我刪除了邊界效應沒有改變，如果我刪除下劃線，只保留邊框，下劃線根本就沒有。 –

enter image description here 你的意思

ul li:hover:after{ 
    border-bottom: 2px solid red; 
    bottom: 0; 
    content: ""; 
    left: 0; 
    position: absolute; 
    width: 100px; 
}

http://jsfiddle.net/kisspa/DZUPF/2/

來源

2014-06-11 09:02:22 Kisspa

不，我想要活動的邊框 –

好！下一個視圖，我做更新.. – Kisspa

你沒事...？ – Kisspa

嘗試添加！重要的屬性，例如

a:hover { 
    border-bottom:2px solid #ad1f2d !important; 
} 

a:active { 
    border-bottom:2px solid #ad1f2d !important; 
}

這將覆蓋任何級聯樣式，並會指出是否由於級聯樣式引起的問題。

以上似乎並不爲你工作那麼這個怎麼樣，包您導航鏈接在一個div一個ID

的CSS

#mydiv .navbar-nav>li>a:hover , 
#mydiv .navbar-nav>li>a:active { 
    border-bottom: 2px solid #ad1f2d!important; 
}

和HTML

<div id="mydiv" class="navbar-collapse navbar-right collapse"> 
       <ul class="nav navbar-nav"> 
        <li>@Html.ActionLink("Home", "Index", "Home")</li> 
        <li>@Html.ActionLink("About", "About", "Home")</li> 
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>      
       </ul> 
       @Html.Partial("_LoginPartial") 
      </div>

來源

2014-06-11 09:28:57

那麼爲什麼不簡單：'a：hover，a：active {...}'？ –

是的，這是更簡潔，我使用相同的CSS發佈，以免混淆。 –

沒有不工作的活動，是否有任何壓倒Bootstrap。我已經在引導CSS後添加了我的CSS，所以沒有覆蓋的可能性，但不知道，爲什麼一個：主動不工作 –

Bootstrap3具有下劃線的導航鏈接樣式

回答

相關問題