如何在Bootstrap 5中让导航栏及品牌标识居中对齐

直接调整结构即可实现需求，无需额外自定义CSS，修改后的代码如下：

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navcol-1">
            <span class="visually-hidden">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navcol-1" class="collapse navbar-collapse justify-content-center">
            <a class="navbar-brand" href="#">Brand</a>
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
            </ul>
        </div>
    </div>
</nav>

修改说明： #

• 调整结构：将品牌标识（navbar-brand）移到折叠容器（collapse navbar-collapse）内部，让它和导航链接共享同一个居中布局容器
• 添加居中类：给折叠容器加上justify-content-center，利用Bootstrap的flex工具类实现内部内容水平居中
• 保留折叠功能：原有的navbar-expand-md和折叠按钮保持不变，确保屏幕小于md尺寸时，导航栏可正常折叠展开

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