首頁 >web前端 >css教學 >如何使用 Bootstrap CSS 類別對齊表格內的文字?

如何使用 Bootstrap CSS 類別對齊表格內的文字?

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-11-02 03:01:02767瀏覽

How Can I Align Text Inside a Table Using Bootstrap CSS Classes?

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn