Css 导航栏链接之间存在无法解释的间隙

当我将鼠标悬停在li上时，左边有一个间隙，我在开发人员控制台中找不到任何解释

.custom nav>li{
填料：1.5em 1em；
右边框：0.1米实心#ccc；
}
.自定义导航>li>a{
填料：1.5em 1em；
}
.自定义导航>li:悬停{
背景：#777；
}

引导使列表项成为内联元素，内联元素对空白敏感。只需删除它们之间的空白：

.custom nav>li{
填料：1.5em 1em；
右边框：0.1米实心#ccc；
}
.自定义导航>li>a{
填料：1.5em 1em；
}
.自定义导航>li:悬停{
背景：#777；
}

内联元素之间的换行符会创建空白。有几种方法可以解决这个问题：将父级的字体大小设置为0px，删除换行符，添加注释

line breaks like that:
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="list-inline custom-nav"><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
        --><li><a href="#">Link</a></li><!--
      --></ul>
    </div>
  </div>
</div>

像这样的换行符：

---

我建议您添加这些CSS选项（然后进一步编辑CSS）：

可能重复的

.list-inline > li {
    display: block;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
}