Vue-Bootstrap不同视口文本对齐：大屏左/中屏居中/小屏右对齐实现

嘿，我来帮你搞定这个响应式文本对齐的问题！

你的问题出在Bootstrap响应式对齐类的写法上，咱们一步步来修正：

核心问题分析 #

Bootstrap的响应式文本对齐类是 text-{断点}-{对齐方式}，这些类是基于最小屏幕宽度生效的——也就是说，当屏幕宽度≥对应断点时，这个类的样式会覆盖更小断点的样式。你之前的类顺序和目标对齐方式不匹配，所以没达到预期效果。

修正后的代码 #

<div class="container">
  <b-row class="row">
    <!-- 版权文本：大屏左对齐、中屏居中、小屏右对齐 -->
    <b-col sm="4" class="my-auto text-sm-right text-md-center text-lg-left">
      <span class="text-white"> 2020 copyright, All rights reserved. </span>
    </b-col>
    <!-- 中间文本：全屏幕居中 -->
    <b-col sm="4" class="mt-2 text-center">
      <p>Some text</p>
    </b-col>
    <!-- 右侧文本：如果需要对应响应式，可参考第一个列的写法调整 -->
    <b-col sm="4" class="mt-2 text-sm-left text-md-center text-lg-right">
      <p>Some text</p>
    </b-col>
  </b-row>
</div>

关键细节解释 #

1. 类的顺序逻辑：要从最小断点到最大断点写类，这样大屏幕的样式会自动覆盖小屏幕的：
   • text-sm-right：屏幕≥576px（小屏sm）时，文本右对齐
   • text-md-center：屏幕≥768px（中屏md）时，文本居中（覆盖小屏的右对齐）
   • text-lg-left：屏幕≥992px（大屏lg）时，文本左对齐（覆盖中屏的居中）
2. 适配最小屏幕（<576px）：如果想让手机端（xs断点）也右对齐，只需要在类的最前面加 text-right（默认对应xs断点），变成 text-right text-md-center text-lg-left 即可，这样xs和sm屏都是右对齐，md居中，lg左对齐。
3. 布局宽度补充：如果想让xs屏也保持3列布局（和sm及以上一致），可以给b-col加上 xs="4" 属性，比如 <b-col xs="4" sm="4" ...>。

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