如何用Bootstrap原生类实现md/sm屏幕下列的文本居中（无需自定义CSS）

直接用Bootstrap自带的响应式文本对齐类就能搞定，完全不用自定义CSS或者媒体查询。

你只需要把右侧列原来的text-end类换成text-sm-center text-lg-end的组合即可：

• text-sm-center：在sm（≥576px）、md（≥768px）尺寸的屏幕下，设置列内内容居中对齐
• text-lg-end：当屏幕尺寸达到lg（≥992px）及以上时，覆盖居中样式，恢复右对齐

示例代码：

<div class="row">
  <div class="col-6">
    左侧文本内容
  </div>
  <div class="col-6 text-sm-center text-lg-end">
    <img src="your-image.jpg" alt="示例图片" class="img-fluid">
  </div>
</div>

Bootstrap的响应式类遵循「断点越大优先级越高」的规则，所以大屏下的右对齐样式会自动覆盖中小屏的居中样式，刚好匹配你的需求。

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