Bootstrap5导航栏使用justify-content-between不生效问题

问题根源 #

1. justify-content-between 的作用是分配弹性容器内多个直接子元素之间的间距，你将该类加在了.container上，但.container下只有<ul class="navbar-nav">唯一一个直接子元素，自然无法产生两端分散对齐的效果。而justify-content-center只需要将单个子元素居中，所以可以正常生效。
2. 你需要实现的3个链接分散对齐，应该将弹性布局属性加在直接包含<li>的<ul class="navbar-nav">上，同时需要给<ul>设置100%宽度，否则其宽度默认适配内容，没有多余空间分配子元素间距。
3. 如果你在小于lg断点的屏幕下测试，navbar-expand-lg会让导航栏进入折叠状态，此时.navbar-nav默认是垂直块级排列，也会导致水平对齐属性不生效。

修正后代码 #

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- 给ul添加全宽类和两端对齐类 -->
        <ul class="navbar-nav w-100 justify-content-between">
            <li class="nav-item">
                <a href="" class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">Contact</a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">About</a>
            </li>
        </ul>
    </div>
</nav>

额外说明 #

如果需要导航栏在所有尺寸下都保持水平排列不折叠，可以将navbar-expand-lg修改为navbar-expand即可。

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