本文详解如何仅使用 Bootstrap 内置响应式文本对齐工具类（如 text-center、text-sm-end），在不同屏幕尺寸下无缝切换文本对齐方式，无需自定义 CSS 或媒体查询。
本文详解如何仅使用 bootstrap 内置响应式文本对齐工具类（如 `text-center`、`text-sm-end`），在不同屏幕尺寸下无缝切换文本对齐方式，无需自定义 css 或媒体查询。
Bootstrap 的响应式文本对齐类基于“移动优先”设计原则，提供了一套语义清晰、断点明确的工具类，可直接控制 text-align 在不同视口下的表现。针对您的场景——小屏（sm）及以下居中显示，中屏（md）及以上右对齐（注意：您原文中提到“从 text-end 改为 text-center 在 md/sm 屏”，但结合实际需求与 Bootstrap 断点逻辑，更合理的实现是：默认居中 → sm+ 右对齐；若需反向逻辑，下文亦会说明）——推荐使用如下组合类：
<div class="row">
<div class="col-6">
<p>左侧文本内容</p>
</div>
<div class="col-6">
<!-- 右侧图像区域 -->
@@##@@
</div>
</div>
<!-- 关键：对需要对齐控制的元素（如右侧文字说明、标题等）应用响应式类 -->
<div class="col-6 text-center text-sm-end">
<p class="mb-0">右侧说明文字</p>
</div>✅ 类名解析（Bootstrap 5+）：
- text-center：应用于所有断点（xs 及以上），即默认居中；
- text-sm-end：仅在 sm（≥576px）及以上生效，覆盖前一个类，实现右对齐；
- 后续断点如 md/lg/xl 无需额外声明，因 text-sm-end 已持续生效至最大断点。
? 重要注意事项：
- Bootstrap 5 中已弃用 text-right / text-left，统一使用 text-start 和 text-end（支持 RTL 语言），请勿混用旧类；
- 断点继承规则：text-{breakpoint}-* 类具有层级覆盖性，后声明的类优先级更高（CSS 源码顺序决定），因此 text-center text-sm-end 是安全且标准的写法；
- 若您实际需要的是「仅在 md/sm 屏居中，其他尺寸右对齐」，Bootstrap 原生不支持“中间断点独占”（即无 text-md-center + text-lg-end 这样的非连续覆盖组合），此时必须借助 text-md-center text-lg-end text-xl-end 显式声明后续断点，或接受 text-center 作为基础态（推荐前者）：
<p class="text-end text-md-center text-lg-end">仅在 md（768–991px）居中，其余右对齐</p>
? 扩展技巧：
对于图像容器本身需对齐控制（如让 
在 .col-6 内水平居中），可直接在图像上添加 mx-auto d-block（配合 img-fluid），或对父容器使用 text-center（适用于行内元素）。
总结：纯 Bootstrap 实现响应式文本对齐，核心在于理解其移动优先断点体系与类名覆盖机制。善用 text-{bp}-start/end/center 组合，即可零 CSS 完成专业级布局适配，兼顾可维护性与语义化。
