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

所以，我用Bootstrap制作了一个导航栏。 这就是它看起来的样子

链接的背景色不是

100%

height

我希望他们是这样的：

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

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

---

您在

.navbar nav

类上有填充，而在

.navbar custom.navbar nav.active

上有背景色效果。我建议将填充放在同一元素上：

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

找到一个有效的例子

---

增大“结果”面板的大小以查看实际结果

@ManveerSingh：显然，“导航栏导航”位于另一个高度不是100%的分区（即“容器流体”）的内部。我建议添加以下代码片段：

.navbar custom.container fluid{height:100%；}

@ManveerSingh:使用Chrome或Mozilla Firefox中的“Inspect Element”工具检查包含“navbar”、“container fluid”和“navbar nav”类的元素的边距和填充。应该有一些不允许100%高度的余量。“Inspect element”可在页面上单击鼠标右键获得。@但是，零点填充使元素的高度为100%。但是没有利润。@ManveerSingh:找到了问题。在将背景色效果置于

.navbar custom.navbar nav.active

上时，.navbar nav”类上有填充。我建议将填充放在同一个元素上：

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

找到一个工作示例增加“Result”面板的大小以查看实际结果

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