Question

我有问题。我有一个带有图像链接的导航栏，如下图所示（请忽略截至目前的主页链接）：

我想水平移除每个图像之间的灰色空间。我试图在所有图像和列表项上设置边距：0％和填充：0％，但无济于事。查看Bootstraps源代码我怀疑它与navbar-nav和导航类是flex容器有关，但是我应该给出什么样的灵活属性来解决这个问题我不清楚。

以下是导航栏的HTML：

＆＃13;

<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>

＆＃13;

这是相关的（？）CSS：

＆＃13;

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

＆＃13;

提前致谢，我非常感谢您的帮助！

祝你好运，约书亚

Answer 1

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

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

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

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

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

1 个答案: