如何在Bootstrap 5导航栏中实现内容两端对齐？

针对你的需求，有两种简洁的实现方式，均利用Bootstrap 5内置的Flex布局类，无需额外自定义CSS：

方法1：通过容器两端对齐布局实现 #

给导航栏内部的.container添加justify-content-between类，让容器内的子元素（品牌、折叠菜单容器）自动分布在左右两端。大屏下折叠按钮隐藏，品牌与导航链接分别居左、居右；小屏下折叠按钮自动靠右，符合响应式逻辑。

修改后的代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="container justify-content-between">
        <a class="navbar-brand" href="#"><img src="images/brand.png"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Services</a>
                <a class="nav-link" href="#">Contact Us</a>
            </div>
        </div>
    </div>
</nav>

方法2：给导航链接添加自动外边距 #

给.navbar-nav添加ms-auto类（Bootstrap 5中ms对应左侧外边距，LTR布局下会自动将元素推至最右侧）。这种方式更灵活，即便容器内还有其他元素（比如搜索框），导航链接依然会靠右对齐。

修改后的代码：

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="images/brand.png"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav ms-auto">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Services</a>
                <a class="nav-link" href="#">Contact Us</a>
            </div>
        </div>
    </div>
</nav>

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