文本对齐 · Bootstrap 6.0 中文文档

类名	样式
.text-start	text-align: start;
.text-end	text-align: end;
.text-center	text-align: center;

对齐

使用文本对齐类可以轻松地将文本重新对齐到组件。对于起始、结束和居中对齐，有响应式类可用，这些类使用与网格系统相同的视口宽度断点。

在所有视口尺寸上开始对齐文本。

在所有视口尺寸上居中文本。

在所有视口尺寸上右对齐文本。

在尺寸为 SM（小）或更大的视口上将文本对齐到末端。

在中等（MD）或更大视口上将文本对齐到末尾。

在视口尺寸为LG（大）或更大时，将文本对齐到末端。

在 XL（超大）或更宽的视口上将文本对齐到末端。

在宽度为 2xl（超超大）或更宽的视口上将文本对齐到末端。

HTML

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="sm:text-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="md:text-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="lg:text-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="xl:text-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="2xl:text-end">End aligned text on viewports sized 2xl (extra extra large) or wider.</p>

注意，我们不提供用于两端对齐文本的工具类。虽然从美观上来看，两端对齐的文本可能更有吸引力，但它确实会使单词间距更随机，因此更难阅读。

响应式

text-align也存在响应式变体。

.text-start
.text-center
.text-end
.sm:text-start
.sm:text-center
.sm:text-end
.md:text-start
.md:text-center
.md:text-end
.lg:text-start
.lg:text-center
.lg:text-end
.xl:text-start
.xl:text-center
.xl:text-end
.2xl:text-start
.2xl:text-center
.2xl:text-end

CSS

Sass 工具 API

文本对齐工具在我们的工具 API 中的 scss/_utilities.scss 声明。了解如何使用工具 API。

scss/_utilities.scss

"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: start,
    end: end,
    center: center,
  )
),