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上添加背景颜色效果时，您在.navbar-custom .navbar-nav .active课程中有了填充。我建议将填充放在同一个元素上：

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

找一个有效的例子here 增加“结果”面板的大小以查看实际结果

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

1 个答案: