如何使用 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中文網其他相關文章！