如何在引导程序中的导航项之间添加空格

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-items。如果它不起作用，请确保在引用 bootstrap.css 后应用自定义样式。顺便说一句，Bootstrap 使用应用于.navbar-expand-{breakpoint} .navbar-nav .nav-link 的填充来分隔项目。以下也应该可以正常工作：

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

此外，如果您不介意扩展标记，Bootstrap 中提供了方便的Spacing utility 类。有了这些，您可以轻松地微调您的布局。
在下面的示例中，我在.nav-items 上使用.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"/>

Answer 2

为了在 bootstrap4 中分隔两个导航栏区域，我使用了这个：

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">
        <img src="logo.png" width="192" height="44" alt="">
        Bootstrap Navbar Demo
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link mx-3 active" href="/page1">Page 1</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 2</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 3</a>
        </div>
        <div class="navbar-nav">
          <a class="nav-item nav-link mx-3" href="/logout">Logout</a>
        </div>
      </div>
    </nav>

基本上，按钮的边距为mx-3 以将它们分开一点。 mr-auto 将logout 按钮推到最右边。

https://stackoverflow.com/a/18600623/999943 非常好。

希望对您有所帮助。

Answer 3

您需要将边距应用到类 .navbar-nav > .nav-item 而不是 .navbar-nav > a。

所以你应该这样做。

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