Bootstrap5行/列元素中ms-auto属性未按预期生效问题咨询

你当前使用的两个.col类在Bootstrap栅格规则中会默认均分所在行的总宽度，第二个列本身已经占据了行宽的50%，不存在额外的横向剩余空间，所以你给第二个列添加的ms-auto类不会触发自动左外边距填充的效果。

下面给出3种常用的实现方案，你可以根据实际需求选择：

方案1：修改列宽属性 + 保留ms-auto #

把第二个列的类从.col改为.col-auto，让列宽仅适配内部按钮的实际宽度，此时剩余的横向空间会被ms-auto自动填充，实现右对齐效果。
修改后的代码如下：

<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h3>Listado de estudiantes</h3>
    </div>
    <!-- 把col改为col-auto即可 -->
    <div class="col-auto ms-auto">
      <button class="btn btn-primary" (click)="toogle()">Toogle</button>
    </div>
  </div>
</div>

方案2：给列添加内容右对齐类 #

不需要修改列的宽度属性，直接给第二个列加.text-end类，让列内的所有内容默认右对齐即可：

<div class="container mt-4">
  <div class="row">
    <div class="col">
      <h3>Listado de estudiantes</h3>
    </div>
    <div class="col text-end">
      <button class="btn btn-primary" (click)="toogle()">Toogle</button>
    </div>
  </div>
</div>

方案3：使用flex布局的两端对齐属性 #

给行元素加.justify-content-between类，同时把两个列都设为.col-auto适配内容宽度，直接实现左右两端对齐：

<div class="container mt-4">
  <div class="row justify-content-between">
    <div class="col-auto">
      <h3>Listado de estudiantes</h3>
    </div>
    <div class="col-auto">
      <button class="btn btn-primary" (click)="toogle()">Toogle</button>
    </div>
  </div>
</div>

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