导航栏中的样式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

回答

相关问题