减少导航栏元素之间的空间 Bootstrap-5答案

【问题标题】：Decreasing space in-between navbar elements Bootstrap-5减少导航栏元素之间的空间 Bootstrap-5
【发布时间】：2021-03-29 19:18:12
【问题描述】：

这就是我的目标（忽略花哨的背景）这就是我得到的：我将如何减少元素之间的空间，并将其置于导航栏中？到目前为止，这是我的代码 - 使用引导程序 5

    <nav class="navbar bg-primary mt-3">
        <div class="container-inline navbar-brand">
            <img src="img/logo.png" class="ms-4" width="60" alt="Logo">
            <a class="text-light ms-5 fw-bold">TEST</a>
        </div>
            <a class="nav-link text-light">One</a>
            <a class="nav-link text-light">Two</a>
            <a class="nav-link text-light">Three</a>
            <a class="nav-link text-light">Four</a>
    </nav>

【问题讨论】：

container-inline 是干什么用的？您是否希望导航栏在较小/移动屏幕宽度下折叠或垂直堆叠？

标签： html twitter-bootstrap web bootstrap-5

【解决方案1】：

使用 Bootstrap 的导航栏时，仅使用supported content。遵循文档中的指导...

导航栏需要一个带有 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 的包装 .navbar 用于响应式折叠和配色方案类。

默认情况下，导航栏及其内容是流畅的。更改容器以不同方式限制其水平宽度。

使用我们的间距和 flex 实用程序类来控制导航栏中的间距和对齐方式。

因此，请按照导航栏的指南...

假设您希望它始终保持水平，请添加 navbar-expand 类。
nav-links 应包含在 navbar-nav 中（支持的内容）
使用间距/flex 实用程序类。要将navbar-nav 居中，请使用w-100 创建3 个等宽的导航栏divs/sections。然后在navbar-nav 上的justify-content-center 使中间部分的内容居中。

   <nav class="navbar navbar-expand bg-primary mt-3">
        <div class="container-fluid">
            <div class="w-100">
                <img src="//placehold.it/60x30" class="ms-4" width="60" alt="Logo">
                <a class="navbar-bran text-light ms-5 fw-bold">TEST</a>
            </div>
            <div class="navbar-nav justify-content-center">
                <a class="nav-link text-light">One</a>
                <a class="nav-link text-light">Two</a>
                <a class="nav-link text-light">Three</a>
                <a class="nav-link text-light">Four</a>
            </div>
            <div class="w-100">
            </div>
        </div>
   </nav>

Demo

由于 Bootstrap 5 仍然使用像 Bootstrap 4 一样的 flexbox，aligning Navbar content hasn't changed between the 2 versions。

【讨论】：