减少 space 中间导航栏元素 Bootstrap-5

Question

这就是我的目标（忽略花哨的背景）这就是我得到的：我将如何减少元素之间的 space 并将其居中放置在导航栏中？到目前为止，这是我的代码 - 使用 bootstrap 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>

Answer 1

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

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.

Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

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

假设您希望它始终保持水平，添加 navbar-expand class.
nav-link 应包含在 navbar-nav（支持的内容）
使用 spacing/flex 实用程序 classes。要使 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.

减少 space 中间导航栏元素 Bootstrap-5

Decreasing space in-between navbar elements Bootstrap-5

html

web

twitter-bootstrap

bootstrap-5