Bootstrap导航栏-删除按钮之间的空间

Question

我有个问题。 我有一个导航栏，其中的链接由下图所示的图像表示（请从现在开始忽略Home链接）：

我想水平去除每个图像之间的灰色空间。 我尝试在所有图像和列表项上设置边距：0％和填充：0％，但无济于事。 研究Bootstraps源代码时，我怀疑它与navbar-nav和nav类是flex容器有关，但是我不清楚应该为该问题提供什么值的flex属性。

这是导航栏的HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_content"> <i class="glyphicon glyphicon-align-center"></i> </button> <a href="#" class="navbar-brand"> Survey webapp </a> </div> <div id="navbar_content" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li class="navitem"> <a href="#about"> <img class="navimage" src="Routine survey.png" /> </a> </li> <li class="navitem"> <a href="#contact"> <img class="navimage" src="Specific survey.png" /> </a> </li> <li class="navitem"> <a href="#help"> <img class="navimage" src="Help.png" /> </a> <a href="#settings"> <img class="navimage" src="Settings.png" /> </a> </li> </ul> </div> </div> </nav> 

这是相关的（？）CSS：

 .nav { padding: 0%; margin: 0%; } .navbar-nav { padding: 0%; margin: 0%; } .navitem { padding: 0%; margin: 0%; } 

在此先感谢您，非常感谢您的帮助！

最好的问候，约书亚

Answer 1

看起来Bootstrap（版本3）将填充应用于.nav内的<a>元素：

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

我不知道Bootstrap是否具有删除该填充的本机方法，但是您始终可以自己覆盖它：

.nav>li>a {
    padding: 0;
}