Bootstrap5中div内ms-auto无法实现内容右对齐如何解决？

• 网格结构错误：你将container与row类写在同一个DOM元素上，违反了Bootstrap5网格系统container → row → col的三层嵌套规则，破坏了flex布局上下文，导致margin类无法正常生效。
• 类的使用场景错误：ms-auto作用是调整flex子项自身的左外边距，需要子项总宽度小于父容器宽度才能生效。你当前两个列均为col-sm-6，总宽度刚好占满父容器12格，没有多余空间可用于margin撑开。且你的需求是列内部内容右对齐，不需要调整列本身的位置。

方案1：保持等宽两列布局，用文本对齐类实现内容右对齐 #

直接给第二个列加text-end类即可实现内部行内元素右对齐，同时修正网格结构：

<div class="p-5 rounded bg-light text-dark">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <p>Copyright © 2021 Ekayanam - All Rights Reserved.</p>
      </div>
      <div class="col-sm-6 text-end">
        <a href="https://www.facebook.com/Ekayanam" target="_blank"><i class="fab fa-facebook text-primary fa-2x"></i></a>
        <a href="https://www.instagram.com/ekayanam/" target="_blank"><i class="fab fa-instagram text-danger fa-2x"></i></a>
      </div>
    </div>
  </div>
</div>

方案2：使用ms-auto实现列右对齐（适合不等宽布局） #

如果不需要两列等宽，可将列宽改为自动适配，此时ms-auto可将第二个列整体推到容器右侧，同时可以加align-items-center实现两行内容垂直居中：

<div class="p-5 rounded bg-light text-dark">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-sm-auto">
        <p>Copyright © 2021 Ekayanam - All Rights Reserved.</p>
      </div>
      <div class="col-sm-auto ms-auto">
        <a href="https://www.facebook.com/Ekayanam" target="_blank"><i class="fab fa-facebook text-primary fa-2x"></i></a>
        <a href="https://www.instagram.com/ekayanam/" target="_blank"><i class="fab fa-instagram text-danger fa-2x"></i></a>
      </div>
    </div>
  </div>
</div>

• Bootstrap5的text-end类专门用于块级元素内部的行内、行内块内容右对齐，是当前场景最适配的方案。
• ms-auto仅在flex父容器下，且子项总宽度小于父容器宽度时生效。
• 必须严格遵循container → row → col的网格嵌套规则，不要合并container和row类到同一元素。

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