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

我已经在这上面搜索了几个小时了，但是没有找到引导代码，所以我来了！我将导航栏设置为在991px处折叠，一旦查看，列表元素就具有我想要的背景颜色，但是当您将鼠标悬停在它们上方时，每个列表元素都有一个透明的边距。我怎样才能摆脱这个空白，我一直在搞导航栏导航李a，我在导航栏中的链接是H5s，所以导航栏导航李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 -->

---

我用叉子叉了一把小提琴，它是在考虑引导的情况下创建的，并加入了你的代码，所以我想我可能复制了这个问题。问题似乎根本不是边距，而是在引导过程中默认设置为悬停/聚焦时透明的背景色

.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;
}

---

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

忘了包含一个片段。单击折叠按钮时，这里有一个链接指向一个列表项悬停在上方。有在线版本吗？因为代码片段不足以重现问题否，仅在我的本地主机上：（，因此我想更具体地说，从图片上看，当鼠标悬停在引导程序的折叠菜单上时，列表项是否有一个需要更改的透明边距？我正在查看它，但无法真正获得正确的部分（据我所知）即使在搜索悬停关键字时。我也会看到这个所谓的边距。请编辑您的问题，并提供更多相关的

CSS

和

HTML

我的CSS文件已经全部包含，唯一剩下的HTML是元标记、CSS和js文件。我还没有在CSS中为这个边距添加任何代码，所以我很抱歉我假设boostrap.css是默认的。我只是不知道特定的代码是否可以在我自己的css文件中更改，如果可以的话，哪些元素可以更改。很明显，在照片中，这些列表元素一旦折叠，肯定会有一些透明的边距。

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