bootstrap 导航栏链接不显示 100% 背景色

Question

所以，我用Bootstrap做了一个导航栏。这是它的样子 enter image description here.

链接的背景颜色不是100%高度。

我希望他们是这样的：

我是网络开发新手，非常感谢您的帮助。

这是我的 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;
      }

Answer 1

您在 .navbar-nav class 上添加了填充，而在 .navbar-custom .navbar-nav .active 上添加了背景颜色效果。我推荐的是将 padding 放在同一个元素上：

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

查找工作示例here 增加 "Result" 面板的大小以查看实际结果

bootstrap 导航栏链接不显示 100% 背景色

bootstrap navigationbar links doesnt show 100% background color

navigationbar

twitter-bootstrap