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

Changing the space between each item in Bootstrap navbar

提问by user2953989

How can I create a larger space between each link on my navbar, so they are further apart? Is it something I change the CSS or HTML? Here's how I've implemented my navbar in the html:

如何在导航栏上的每个链接之间创建更大的空间，使它们相距更远？是我更改了 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>

回答by DaniP

You can change this in your CSS with the property padding:

您可以使用以下属性在 CSS 中更改此设置padding：

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

Also you can set margin

你也可以设置 margin

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

回答by Joe Sinfield

Just remember that modifying the padding or margins on any bootstrap grid elements is likely to create overflowing elements at some point at lower screen-widths.

请记住，修改任何引导网格元素的内边距或边距很可能会在较低屏幕宽度的某个点上创建溢出元素。

If that happens just remember to use CSS media queries and only include the margins at screen-widths that can handle it.

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

In keeping with the mobile-first approach of the framework you are working within (bootstrap) it is better to add the padding at widths which can handle it, rather than excluding it at widths which can't.

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

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

回答by loopasam

As of Bootstrap 4, you can use the spacing utilities.

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

Add for instance px-2in the classes of the nav-itemto increase the padding.

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

回答by Rami Alloush

I would suggest you just evenly space them as shown in this answer here

我建议您按照此处的答案所示均匀间隔它们

.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 */
}