ブートストラップ CSS クラスを使用してテーブル内のテキストを整列するにはどうすればよいですか?

CSS クラスを使用してテーブル内のテキストを整列させる方法

Twitter の Bootstrap フレームワークは、HTML 要素内でテキストを整列させるための強力な CSS クラスのセットを提供します。これらのクラスをテーブル要素に適用して、目的の配置を実現できます。

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: すべてのビューポートで中央揃えのテキストsize
• .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 に置き換えられました。それ以外の場合、配置オプションは同じままです。

以上がブートストラップ CSS クラスを使用してテーブル内のテキストを整列するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。