导航栏中的折叠菜单：从列表元素中删除透明边距？

Question

我已经为此搜索了几个小时并且倾注了引导代码无济于事，所以我在这里！我将导航栏设置为在 991 像素处折叠，一旦查看，列表元素具有我想要的背景颜色，但是当您将鼠标悬停在它们上方时，每个列表元素显然都有一个透明的边距。我将如何摆脱这个边距，我一直在搞乱 navbar-nav li a 并且我在导航栏中的链接是 H5s 所以也是 navbar-nav li a H5 .最后一个列表元素是一个下拉链接，在媒体查询中单击它时，它就像悬停在上面一样，所以我假设它有一个焦点标签，我只是想不出如何解决这两个问题（对CSS/Bootstrap，如果你不知道的话）。这是下面的 HTML，非常感谢任何帮助！

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  data-target="#topFixedNavbar1"  aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    <a class="navbar-brand" href="#">Logo</a></div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="topFixedNavbar1">



    <ul class="nav navbar-nav navbar-right links">
      <li><a href="#"><h5>How We Work</h5></a></li>
      <li><a href="#"><h5>Abous Us</h5></a></li>

      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><h5>Course Subjects</h5><span class="caret"></span></a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->

这是 CSS（我包含了整个文件，但我很确定问题与媒体查询有关）：

body{
padding-top: 120px; 
background-color:#34A0CD;
}
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;   
}

#topFixedNavbar1{
height:120px;
}
.links{
height:120px;

}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
@media (max-width: 991px) {
.dropdown li a{
    line-height:30px;
}

.collapse.navbar-collapse{
    width:100%;

}
.links li a{

    width:100%;
}
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-collapse.in {
overflow-y: visible;
}

.navbar-collapse.collapse {
    display: none!important;

}
.navbar-nav {
    float: none!important;

}
.navbar-nav>li {
    float: none;
}
.navbar-nav li a h5{
line-height: 30px;
background-color: gray;
color: #F1E9E9;     
}
.navbar-nav li a{
    background-color:gray;
    width:100%;
}

.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

}

Answer 1

我分叉了一个 Fiddle，它是在考虑到 Bootstrap 的情况下创建的，并输入了你的代码，所以我想我可能已经重现了这个问题。问题似乎根本不是边距，而是默认情况下在 Bootstrap 中悬停/聚焦时设置为 transparent 的背景颜色。

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: rgb(51, 51, 51);
    background-color: transparent;
}

我测试了一个简单的修改来覆盖默认样式，它似乎工作。

.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus{
  background-color: gray;
}

Here's a demo

显然你可以修改它，但这应该会让你走上正确的轨道。