引導導航欄鏈接犯規顯示100％的背景顏色

-1

所以，我做了一個導航條與引導。這就是它看起來像enter image description here。引導導航欄鏈接犯規顯示100％的背景顏色

鏈接的背景顏色是不100%高度。

我想他們是這樣的：

我是新的Web開發，這樣有利於真的可以理解。

這裏是我的HTML：

<nav class="navbar navbar-custom" > 
      <div class="container-fluid" > 
       <div class="navbar-header"> 
        <a class="pull-left" href="#" > <img class="img-responsive2" src="images/logo.jpg" > </a> 
       </div> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="active"> <a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
     </nav>

這裏是CSS

.navbar-custom 
    { 
    background-color:white; 
    border:none; 
    color:black; 
    padding-right:5em; 
    font-family: 'Slabo 27px', serif; 
    margin-bottom:0px !important; 
    height:100% 
    } 
    .navbar-custom .navbar-nav 
    { 
    padding-top:2.5em; 
    padding-bottom:2.5em; 
    height:100%; 

    } 
    .navbar-custom .navbar-nav .active 
    { 
    background-color: #37B4FD; 
     } 
     .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { 
     background-color: green; 
     } 
     .navbar-custom .navbar-nav > li > a:visited 
     { 
     color:black; 
     }

來源

2015-11-14 Manveer Singh

您對.navbar-nav類填充，而你把.navbar-custom .navbar-nav .active背景顏色效果。我的建議是將填充在相同的元素：

.navbar-custom .navbar-nav li a { 
    padding-top:2.5em; 
    padding-bottom:2.5em; 
    height:100%; 
}

找到工作的例子here 增加「結果」面板的大小，看實際效果

來源

2015-11-14 00:20:50

是的，我現在做到了。 –

@ManveerSingh：顯然，「navbar-nav」在另一個div（即「容器流體」）內，並非100％高。我會建議添加這個片段： '.navbar定製.container流體{ 高度：100％; }' –

@zeropoint試過了。不工作.... –

引導導航欄鏈接犯規顯示100％的背景顏色

回答

相關問題