更改Bootstrap导航栏中每个项目之间的间距

Question

我该如何在导航栏中的每个链接之间创建更大的间距，以便它们彼此分开？ 这是需要我在CSS或HTML中更改的吗？ 以下是我在HTML中实现导航栏的方式：

<div class="navbar-wrapper">
<div class="container">
    <div class="navbar navbar-static-top" role="navigation">
    <div class="container full-width">
    <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#"></a>
     </div>
     <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home_page">Home</a></li>
            <li><a href="#about_page">About</a></li>
            <li><a href="#portfolio_page">Portfolio</a></li>
            <li><a href="#contact_page">Contact</a></li>
        </ul>
     </div>
     </div>
     </div>
</div>
</div>

- user2953989

Answer 1

您可以在CSS中使用padding属性来更改此内容：

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

还可以设置margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

- DaniP

Answer 2

从Bootstrap 4开始，您可以使用间距实用程序。

例如，在nav-item的类中添加px-2以增加填充。

- loopasam

---

最好能够包含更多关于如何使用它的细节和一个示例。无论如何，非常有用。 - Mr. Duhart

谢谢！对我来说运行得很好 <li class="nav-item px-2">...</li> - its_a_paddo

Answer 3

请记住，在任何Bootstrap网格元素上修改填充或边距可能会在较低的屏幕宽度下创建溢出元素。

如果发生这种情况，请记住使用CSS媒体查询，并仅在可以处理它的屏幕宽度下包含边距。

与您正在使用的框架（Bootstrap）的移动优先方法保持一致，最好在可以处理它的宽度上添加填充，而不是在不能处理宽度上排除它。

@media (min-width: 992px){
    .navbar li {
        margin-left : 1em;
        margin-right : 1em;
    }
}

- Joe Sinfield

Answer 4

关于bootstrap，正确的答案是使用间距实用工具，正如loopasam在之前的评论中提到的。下面是一个同时使用左右填充的示例。

<a href="#" class="nav-item nav-link px-3">Blog</a>

- Suneth Perera

---

嗨Suneth，可以发布代码片段并解释用户需要更改的代码部分吗？ - Dilip D

只需在所选的nav-item的class =“”属性中添加px-3（或您选择的任意数字）。 - leiflundberg

Answer 5

我建议您按照这个答案这里所示，将它们均匀地间隔开。

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap; /* assumes you only want one row */
}

- Rami Alloush

Answer 6

我在导航栏中有两个右对齐的按钮（Bootstrap 4），但我不想去调整CSS / 样式等，所以我在两个按钮之间创建了一个禁用的按钮，这样就解决了问题：

<button class="btn btn-primary float-right">Make Active</button>
<button class="btn float-right" disabled>&nbsp;</button>
<button class="btn btn-success float-right">Send Proforma</button>

- cloudxix