html - 如何在 Bootstrap 中的导航项之间添加空间

Question

我想知道是否可以在 Bootstraps 导航栏中添加元素之间的间距以将它们分散一点？具体来说，如果我可以将所有导航项左右间隔至少 25 像素。

我已经尝试在 .navbar-nav 和 .navbar-nav > a 类中添加左右边距，但它似乎没有任何改变。

提前致谢!

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-
    target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-
    expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">Disabled</a>
        </div>
    </div>
</nav>

Answer 1

.navbar-nav > a 应该可以很好地定位 .nav-item。如果它不起作用，请确保在引用 bootstrap.css 后应用自定义样式。顺便说一句，Bootstrap 使用应用于 .navbar-expand-{breakpoint} .navbar-nav .nav-link 的填充来分隔元素。此外，以下应该可以正常工作:

.navbar-nav .nav-link {
    margin-right: 25px;
    margin-left: 25px;
}

此外，如果您不介意扩展标记，还有方便的 Spacing utility Bootstrap 中可用的类。通过这些，您可以轻松微调布局。
在下面的示例中，我在 .nav-item 上使用了 .mx-3 以将它们在水平方向上的边距增加到每一侧的 1rem。然后在最后一个元素上应用 .ml-3 –margin-left– 以使其右边缘与布局的其余部分对齐。

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <a class="navbar-brand" href="#">Navbar</a>
    
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-
    target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-
    expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link mx-3" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link mx-3" href="#">Features</a>
            <a class="nav-item nav-link mx-3" href="#">Pricing</a>
            <a class="nav-item nav-link ml-3" href="#">Disabled</a>
        </div>
    </div>
</nav>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>