引导程序导航栏链接不会显示100%的背景色

Question

所以，我用Bootstrap制作了一个导航栏。这就是在这里输入图像描述的样子。

链接的背景颜色不是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-custom .navbar-nav .active上设置背景色效果时，在.navbar-nav类上有填充。我建议把填充放在同一个元素上：

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

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