如何确保引导导航栏链接有当添加

我加了边框底部到我的活动菜单类如何确保引导导航栏链接有当添加

@media (min-width: 1040px) { 
    #rbc-navbar.navbar-default .navbar-nav > li.active { 
     border-bottom: 3px solid #56c7ff; 
    } 
}

如何每次当我将鼠标悬停在其他环节的链接看起来像没有边框底部相同的高度相同的高度，因为我在底部添加了边框。

问题：自举导航栏，如果我添加边框底部的链接如何确保其他环节全部在同一高度？

Codepen Example here注码笔与工作代码现在

CSS

#rbc-navbar.navbar-default .navbar-brand { 
    color: rgba(255, 255, 255, 1); 
} 

#rbc-navbar.navbar-default { 
    font-size: 16px; 
    background-color: rgba(22, 30, 44, 1); 
    border-bottom-width: 0px; 
} 

@media (min-width: 1040px) { 
    #rbc-navbar.navbar-default .navbar-nav > li.active { 
     border-bottom: 3px solid #56c7ff; 
    } 
} 

#rbc-navbar.navbar-default .navbar-nav > li > a { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(22, 30, 44, 1); 
} 

#rbc-navbar.navbar-default .navbar-nav > li > a:hover, 
#rbc-navbar.navbar-default .navbar-nav > li > a:focus { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(63, 71, 81, 1); 
} 

#rbc-navbar.navbar-default .navbar-nav >.active > a, 
#rbc-navbar.navbar-default .navbar-nav >.active > a:hover, 
#rbc-navbar.navbar-default .navbar-nav >.active > a:focus { 
    color: rgba(255, 255, 255, 1); 
    background-color: rgba(22, 30, 44, 1); 
} 

#rbc-navbar.navbar-default .navbar-toggle { 
    border-color: #161e2c; 
    color: #ffffff; 
} 

#rbc-navbar.navbar-default .navbar-toggle:hover, 
#rbc-navbar.navbar-default .navbar-toggle:focus { 
    background-color: #161e2c; 
} 

#rbc-navbar.navbar-default .navbar-toggle .icon-bar { 
    background-color: #161e2c; 
} 

#rbc-navbar.navbar-default .navbar-toggle:hover .icon-bar, 
#rbc-navbar.navbar-default .navbar-toggle:focus .icon-bar { 
    background-color: #161e2c; 
}

HTML更新

<div id="rbc-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="<?php echo base_url();?>">Riwaka Bowling Club</a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
       <i class="fa fa-bars" aria-hidden="true"></i> 
      </button> 


     </div> 
     <div class="collapse navbar-collapse navbar-menubuilder"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li class="active"><a href="/">Home</a> 
       </li> 
       <li><a href="/about-us">About Us</a> 
       </li> 
       <li><a href="/contact">Contact Us</a> 
       </li> 
      </ul> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="">Members Login <i class="fa fa-sign-in" aria-hidden="true"></i></a></li> 
      </ul> 
     </div> 
    </div> 
</div>

来源

2017-10-12 user4419336

试试这个CSS，

#rbc-navbar.navbar-default .navbar-nav > li:not(a:hover),#rbc-navbar.navbar-default .navbar-nav > li:not(.active) { 
    border-bottom: 3px solid transparent; 
} 

#rbc-navbar.navbar-default .navbar-nav > li:not(.active) a:hover { 
    border-bottom: 3px solid rgba(63, 71, 81, 1); 
}

Codepen here

来源

2017-10-12 11:11:07 kiranvj

最简单的事情是将透明边框添加到所有菜单项中，然后更改活动菜单上的颜色。

@media (min-width: 1040px) { 
    #rbc-navbar.navbar-default .navbar-nav > li { 
     border-bottom:3px solid transparent; 
    #rbc-navbar.navbar-default .navbar-nav > li.active { 
     border-bottom-color: #56c7ff; 
    } 
}

来源

2017-10-12 10:43:39 Lee

如何确保引导导航栏链接有当添加

回答

相关问题