Bootstrap 5中navbar-brand始终居左，使用ml-5类无效该如何解决？

问题原因 #

Bootstrap 5 对间距类命名做了适配RTL布局的调整，原有的左外边距类ml-*、右外边距类mr-*已被废弃，替换为以下两类：

• ms-*：行首外边距，在LTR（从左到右书写）布局下等价于原来的ml-*，即左外边距
• me-*：行尾外边距，在LTR布局下等价于原来的mr-*，即右外边距

你使用的ml-5属于Bootstrap 4及更早版本的类，在Bootstrap 5环境下不会生效，同时代码中使用的mr-auto也需要同步替换为me-auto才能正常实现自动右外边距的效果。

解决方法 #

如果需要给navbar-brand添加左侧间距，将原ml-5替换为ms-5即可，修改后的完整代码如下：

<body>
    <nav class="navbar navbar-expand navbar-dark bg-dark">
        <a class="navbar-brand ms-5" href="#">Welcome</a>
        <ul class="navbar-nav me-auto">
            <li class="nav-item">
                <a class="nav-link" href="Signup.html">Sign In</a>
            </li>
        </ul>
    </nav>
</body>

如果需要实现其他间距效果，只需要将原有ml/mr开头的类统一替换为ms/me开头即可。

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