Bootstrap 文字对齐方式
使用 Bootstrap 工具类设置文字对齐
问题
用 Bootstrap，如何设置文字的对齐方式？
解答
Bootstrap 提供了一组文字对齐工具类，可以快速设置文本的水平对齐方式。
基础对齐类
<!-- 左对齐 -->
<p class="qdls7">左对齐文本</p>
<!-- 居中对齐 -->
<p class="otnut">居中对齐文本</p>
<!-- 右对齐 -->
<p class="gjwk9">右对齐文本</p>响应式对齐
可以根据不同屏幕尺寸设置不同的对齐方式：
<!-- 小屏左对齐，中屏居中，大屏右对齐 -->
<p class="qdls7 text-md-center text-lg-end">
响应式对齐文本
</p>完整示例
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
<!-- 基础对齐 -->
<p class="qdls7 bg-light tw4b7">text-start: 左对齐</p>
<p class="otnut bg-light tw4b7">text-center: 居中</p>
<p class="gjwk9 bg-light tw4b7">text-end: 右对齐</p>
<!-- 响应式对齐 -->
<p class="otnut text-md-start bg-info tw4b7">
小屏居中，md 及以上左对齐
</p>
</body>
</html>Bootstrap 4 与 5 的区别
| 对齐方式 | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| 左对齐 | .text-left | .text-start |
| 右对齐 | .text-right | .text-end |
| 居中 | .text-center | .text-center |
Bootstrap 5 使用 start/end 替代 left/right，更好地支持 RTL（从右到左）语言。
关键点
text-start、text-center、text-end分别对应左、中、右对齐- 响应式格式：
text-{breakpoint}-{alignment}，断点包括 sm、md、lg、xl、xxl - Bootstrap 5 用 start/end 替代了 left/right，兼容 RTL 布局
- 这些类本质是设置 CSS 的
text-align属性
目录