CSS 如何在 Bootstrap 4 中均匀间距导航栏元素

在本文中，我们将介绍如何使用 https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 在 Bootstrap 4 中实现导航栏元素的均匀间距。导航栏是网站或应用程序中常用的导航组件，它通常包含一个标志或品牌名称以及一系列导航链接。通过均匀间距这些导航链接，可以提高用户体验和页面美观度。

在 Bootstrap 4 中，导航栏的基本结构如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

以上是一个基本的导航栏结构，它包含了一个品牌标志和四个导航链接。现在我们来看看如何均匀间距这些导航链接。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

使用 CSS Flexbox 实现均匀间距

https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS Flexbox 是一种强大的布局模型，可以帮助我们实现灵活且可响应的布局。在 Bootstrap 4 中，导航栏默认使用 Flexbox 进行布局。

要实现导航链接的均匀间距，我们可以使用 justify-content: space-between; 属性。通过在导航栏容器上添加该属性，导航链接将会在容器内均匀分布，并且具有相等的间距。

.navbar-nav {
    display: flex;
    justify-content: space-between;
}

在上述代码中，我们首先通过 display: flex; 将导航链接容器设置为 Flexbox 布局，然后通过 justify-content: space-between; 设置链接之间的间距为均匀分布。

现在刷新页面，你会看到导航链接与品牌标志之间的间距已经均匀分布了。

使用 CSS Grid 实现均匀间距

除了 Flexbox，我们还可以使用 CSS Grid 来实现均匀间距。CSS Grid 是一个二维布局系统，可以实现复杂的网格布局。

要使用 CSS Grid 实现均匀间距，我们可以通过 grid-template-columns 属性来定义网格的列数和宽度。

.navbar-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 1rem;
}

在上述代码中，我们首先通过 display: grid; 将导航链接容器设置为 Grid 布局，然后通过 grid-template-columns 定义网格的列数和宽度。repeat(auto-fit, minmax(100px, 1fr)) 表示自动适应容器宽度，每列的最小宽度为 100px，每列的最大宽度为 1fr。

通过添加 grid-gap: 1rem;，我们还可以为导航链接之间添加间距。

刷新页面后你会看到导航链接之间的间距已经均匀分布了。