導航欄中的樣式nav-pills

我不確定是否正確，但是在導航欄中使用引導nav-pills不起作用，因爲nav在bootstrap.css中優先。如果正確，那麼我們是不是假設在導航欄中使用這些導航樣式？導航欄中的樣式nav-pills

線4094 .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { color: #ffffff; background-color: #0088cc; }

線4623

.navbar .nav > .active > a, 
    .navbar .nav > .active > a:hover, 
    .navbar .nav > .active > a:focus { 
     color: #555555; 
     text-decoration: none; 
     background-color: #e5e5e5; 
     -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
       box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
    }

來源

2013-02-25 user1614384

您可以在下面的方式來使用它：
的jsfiddle with navbar and navpills

.navbar .nav-pills >li >a { 
    color: #005580; 
} 
    .navbar .nav-pills > li > a:hover { 
     background-color: #0088cc; 
} 
.navbar .nav-pills .active > a { 
    background-color:#ccc; 
    color:#0088cc; 
} 

<div class="navbar"> 
<div class="navbar-inner"> 
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar"> 
    <i class="icon-bar"></i> 
    </a> 

    <a class="brand" href="">New Icon Menu</a> 

    <div class="nav-collapse"> 
     <ul class="nav nav-pills pull-right"> 
      <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a> 
      </li> 
      <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a> 
      </li> 
      <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a> 
      </li> 
      <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a> 
      </li> 
     </ul> 
     </div> 
     </div> 
    </div>

來源

2013-02-25 13:11:42 Shail

感謝您的答覆。我已經編輯上面的背景顏色：在導航仍然優先的活動鏈接上。我們是不是應該在導航欄中使用它？ – user1614384 2013-02-25 13:23:09

這是用navpills創建導航欄的方法。我已經將響應部分加入其中。所以它按照我的建議使用它很好。但是你可以按照你想要的方式定製它。 – Shail 2013-02-25 13:26:14

複製了你的html並仍然看到相同的內容。 line .navbar nav> .active對於背景顏色仍然具有優先權。我如何提供我的HTML給你看？ – user1614384 2013-02-25 13:41:11

導航欄中的樣式nav-pills

回答

相關問題