Navbar Brand无法在Bootstrap导航栏中右对齐的问题求助

我尝试把navbar brand标签浮动到导航栏右侧，但没成功，我的代码如下：

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
            <!---Collapse-->
            <div class="collapse navbar-collapse" id="navbarCollapse"> <a class="navbar-brand"> <a class="navbar-brand" href="#">Gvaldi</a>
                    <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Features</a> <a class="nav-link active" aria-current="page" href="#">Pricing</a> </li>
                        </ul>
    </nav> 
    <style>
        a:link { color: white; background-color: transparent; text-decoration: none; } 
        .a { font-family: "Times New Roman", "Helvetica", "Verdana"; }
    </style>
</body>

修复方案 #

首先要修正代码里的HTML标签错误：

• 删除多余的未闭合 <a class="navbar-brand"> 标签
• 用 <ul class="navbar-nav"> 包裹导航项，每个导航链接放在 <li class="nav-item"> 中，补上缺失的对应闭合标签

然后用以下两种方法实现brand居右：

方法1：使用自动边距类 ms-auto #

把navbar-brand放在导航项之后，添加ms-auto类让它自动左推到右侧：

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Pricing</a>
                    </li>
                </ul>
                <a class="navbar-brand ms-auto" href="#">Gvaldi</a>
            </div>
        </div>
    </nav>
    <style>
        a:link { color: white; background-color: transparent; text-decoration: none; }
        .a { font-family: "Times New Roman", "Helvetica", "Verdana"; }
    </style>
</body>

方法2：使用两端对齐类 justify-content-between #

给折叠容器添加justify-content-between，让导航项和brand分别居左、居右：

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Pricing</a>
                    </li>
                </ul>
                <a class="navbar-brand" href="#">Gvaldi</a>
            </div>
        </div>
    </nav>
    <style>
        a:link { color: white; background-color: transparent; text-decoration: none; }
        .a { font-family: "Times New Roman", "Helvetica", "Verdana"; }
    </style>
</body>

关键提示 #

Bootstrap导航栏基于flex布局，直接用float属性不会生效，必须用框架提供的flex工具类来调整布局；HTML标签语法错误会导致布局异常，必须先修正。

内容的提问来源于stack exchange，提问作者TechNewbie01