Question

我想知道是否可以在Bootstraps导航栏中的项目之间添加间距以将它们展开一点？特别是如果我可以将所有导航项左右分开至少25px。

我尝试在课程.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;
}

另外，如果您不介意扩展标记，可以在Bootstrap中使用方便的Spacing utility类。有了这些，您可以轻松微调您的布局在下面的示例中，我使用.mx-3上的.nav-item将水平方向的边距增加到每边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＆gt;类。 .nav-item 而不是 .navbar-nav＆gt;一个

所以你应该这样做。

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

如何在bootstrap中的导航项之间添加空格

3 个答案: