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

Question

我有一个问题。我有一个带有链接的导航栏，如下图所示(请忽略现在的主页链接):

我想水平地移除每个图像之间的灰色空间。我试图在所有图像和列表项上设置 margin: 0% 和 padding: 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 版)将填充应用于 <a>里面的元素.nav :

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

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

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