如何使用 Bootstrap CSS 类对齐表格内的文本？

如何使用 CSS 类对齐表格内的文本

Twitter 的 Bootstrap 框架提供了一组强大的 CSS 类，用于对齐 HTML 元素内的文本。这些类可以应用于表格元素以实现所需的对齐方式。

Bootstrap 3

对于 Bootstrap 3，以下类可用于对齐表格单元格内的文本:

• .text-left：左对齐文本
• .text-center：居中对齐文本
• .text-right：右对齐文本

示例：

<code class="html"><th class="text-right">Total</th>
<td class="text-right">,000,000.00</td></code>

Bootstrap 4

Bootstrap 4 引入了对文本对齐更精细的控制，允许您可以为不同的视口大小指定不同的对齐方式。提供以下类：

• .text-xs-left：在所有视口尺寸上左对齐文本
• .text-xs-center：在所有视口上居中对齐文本尺寸
• .text-xs-right：所有视口尺寸上的右对齐文本
• .text-sm-left：SM（小）或更宽尺寸的视口上的左对齐文本
• .text-md-left：在 MD（中）或更宽的视口上左对齐文本
• .text-lg-left：在 LG（大）或更宽的视口上左对齐文本
• .text-xl-left：在 XL（超大）或更宽尺寸的视口上左对齐文本

Bootstrap 5

在 Bootstrap 5 中，.text-left 已替换为 .text-start，.text-right 已替换为 .text-end。否则，对齐选项保持不变。

以上是如何使用 Bootstrap CSS 类对齐表格内的文本？的详细内容。更多信息请关注PHP中文网其他相关文章！