twitter-bootstrap – 导航栏中的nav导航丸

发布时间：2020-12-17 21:33:17 所属栏目：安全来源：网络整理

导读：我不确定是否正确但在导航栏中使用bootstrap nav-pills不起作用,因为nav在bootstrap.css中具有优先权.如果正确,那么我们不想在导航栏中使用这些导航样式吗？ 4094行.nav-pills .active a,.nav-pills .active a：悬停,.nav-pills .active a：focus {color：#f

我不确定是否正确但在导航栏中使用bootstrap nav-pills不起作用,因为nav在bootstrap.css中具有优先权.如果正确,那么我们不想在导航栏中使用这些导航样式吗？

4094行.nav-pills> .active> a,.nav-pills> .active> a：悬停,.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.125);
         -moz-box-shadow: inset 0 3px 8px rgba(0,0.125);
              box-shadow: inset 0 3px 8px rgba(0,0.125);
    }

解决方法

您可以通过以下方式使用它：
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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!