Bootstrap 4：小屏幕下如何使col-md-6中的文本居中显示？

嘿，刚好我对Bootstrap的响应式样式很熟悉，来给你捋捋：

首先，Bootstrap本身没有text-center-md这类直接的类，但它提供了一套响应式文本对齐工具类，完全能实现你要的效果，而且不需要额外写太多CSS。

最简便的实现方式：用Bootstrap自带的响应式类 #

你的需求是：

• 当屏幕尺寸在md及以上（≥768px）时，两个col-md-6并排，文本保持默认对齐（比如左对齐）
• 当屏幕缩小到sm及以下（<768px）时，布局折叠成单列，文本居中

直接给你的文本容器加上text-center text-md-start这两个类就可以了，原理是：

• text-center：让所有屏幕下的文本默认居中
• text-md-start：在md及以上的屏幕上，覆盖掉text-center的样式，把文本改回左对齐（start对应左对齐，如果你需要右对齐可以用end）

举个实际代码例子：

<div class="row">
  <div class="col-md-6 text-center text-md-start">
    这是第一列的文本内容，md及以上左对齐，sm及以下居中
  </div>
  <div class="col-md-6 text-center text-md-start">
    这是第二列的文本内容，同样遵循响应式对齐规则
  </div>
</div>

自定义样式方案（如果需要更灵活的控制） #

如果你想自己定义一个类似text-center-md的类，也可以写简单的自定义CSS，利用Bootstrap的断点：

/* 针对sm及以下屏幕（<768px）设置文本居中 */
@media (max-width: 767.98px) {
  .text-center-sm-down {
    text-align: center !important;
  }
}

然后给你的列元素加上text-center-sm-down类，这样在布局折叠时文本就会自动居中，md及以上屏幕保持原来的对齐方式。

补充：Bootstrap响应式对齐类的命名规则 #

顺便给你提一下，Bootstrap的响应式文本对齐类格式是text-{断点}-{对齐方式}，其中：

• 断点可选：sm、md、lg、xl、xxl
• 对齐方式可选：start（左对齐）、center、end（右对齐）、justify等

比如text-sm-end就是在sm及以上屏幕右对齐，text-lg-justify就是lg及以上屏幕两端对齐，灵活组合就能满足各种响应式需求啦～

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