Bootstrap响应式文本对齐不起作用答案

【问题标题】：Bootstrap responsive text-align not workingBootstrap响应式文本对齐不起作用
【发布时间】：2021-10-04 08:46:22
【问题描述】：

我正在尝试仅在较小的视口尺寸及以下制作一些文本中心。比小宽应该左对齐。出于某种原因，当我继续缩小视口时，文本左对齐。

<div class="row">
    <div id="box" class="col-md-6 offset-md-3 col-sm-12 text-md-left text-sm-center">
        Center me on col-sm, otherwise, left align me
    </div>
</div>

#box{
  width:600px;
  height:200px;
  border:1px solid black;
}

【问题讨论】：

您使用的是哪个引导程序版本？
@Amalnandan Bootstrap v5
你已经答对了：)
呼吁重新提出问题。这不是重复的。这是一个专门关于响应式引导类行为的问题，而不是 CSS 文本对齐。

标签： html css twitter-bootstrap

【解决方案1】：

使用 Bootstrap 5，您需要使用 text-sm-start:

  <div class="row">
    <div id="box" class="col-md-6 col-sm-12 offset-md-3 text-center text-sm-start">
      Center me on col-sm, otherwise, left align me
    </div>
  </div>

【讨论】：

啊，我不知道 Bootstrap 5 的变化。非常感谢它有效！