引导导航栏链接不显示 100% 背景颜色答案

【问题标题】：bootstrap navigationbar links doesnt show 100% background color引导导航栏链接不显示 100% 背景颜色
【发布时间】：2015-11-14 00:16:01
【问题描述】：

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

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

我希望他们是这样的：

Please see image

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

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

【问题讨论】：

标签： twitter-bootstrap navigationbar

【解决方案1】：

当您在.navbar-custom .navbar-nav .active 上放置背景颜色效果时，您在.navbar-nav 类上有填充。我建议将填充放在同一个元素上：

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

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

【讨论】：

@ManveerSingh：显然，“navbar-nav”在另一个高度不是 100% 的 div（即“container-fluid”）内。我建议添加这个 sn-p：.navbar-custom .container-fluid { height: 100%; }
@ManveerSingh：使用 Chrome 或 Mozilla Firefox 中的“检查元素”工具检查包含“navbar”、“container-fluid”和“navbar-nav”类的元素的边距和填充。应该有一些不允许 100% 高度的边距。右键单击页面即可使用“检查元素”。
@zeropoint 填充使元素的高度为 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%;} 找到一个工作示例link 增加“结果”面板的大小以查看实际结果