如何確保引導導航欄鏈接有當添加

我加了邊框底部到我的活動菜單類如何確保引導導航欄鏈接有當添加

@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

如何確保引導導航欄鏈接有當添加

回答

相關問題