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

【问题标题】：Bootstrap navbar - removing space between buttonsBootstrap 导航栏 - 删除按钮之间的空间
【发布时间】：2017-11-17 09:22:26
【问题描述】：

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

我想水平移除每个图像之间的灰色空间。我试图在所有图像和列表项上设置 margin: 0% 和 padding: 0% ，但无济于事。查看 Bootstraps 源代码，我怀疑它与作为 flex 容器的 navbar-nav 和 nav 类有关，但我不清楚应该赋予什么 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%;
}

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

最好的问候，约书亚

【问题讨论】：

标签： html twitter-bootstrap css flexbox

【解决方案1】：

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

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

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

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

【讨论】：