html - テーブル内のテキスト整列クラス

Question

テキストを揃える Twitter の Bootstrap フレームワークに一連のクラスはありますか?

たとえば、$右揃えにしたい合計を含むいくつかのテーブルがあります...

<th class="align-right">Total</th>

と

<td class="align-right">$1,000,000.00</td>

Answer 1

ブートストラップ 3

v3 テキスト配置ドキュメント

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

ブートストラップ 4

v4 テキスト配置ドキュメント

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

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

---

ブートストラップ 5

v5 テキスト配置ドキュメント

text-leftに置き換えられましたtext-start, text-rightに置き換えられましたtext-end

<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Answer 2

Bootstrap 3.x を使用text-rightすると、完全に機能します。

<td class="text-right">
  text aligned
</td>

Answer 3

いいえ、Bootstrapにはそのためのクラスはありませんが、この種のクラスは、@antonが言及した「.pull-right」クラスと同様の「ユーティリティ」クラスと見なされます。

Utilities.lessを見ると、Bootstrapにユーティリティクラスがほとんど表示されません。この種のクラスは一般的に眉をひそめているため、次のいずれかに使用することをお勧めします。a）プロトタイピングと開発-すばやく構築できるページを取り出してから、プルライトクラスとプルレフトクラスを削除して、フロートをよりセマンティックなクラスまたは要素自体に適用するか、b）よりセマンティックなソリューションよりも明らかに実用的である場合。

あなたの場合、あなたの質問では、特定のテキストをテーブルの右側に配置したいようですが、すべてではありません。意味的には、次のようなことを行う方がよいでしょう（デフォルトのブートストラップクラスである.tableを除いて、ここでいくつかのクラスを作成します）：

  <table class="table price-table">
    <thead>
      <th class="price-label">Total</th>
    </thead>
    <tbody>
      <tr>
        <td class="price-value">$1,000,000.00</td>
      </tr>
    </tbody>
  </table>

そして、text-align: leftortext-align: right宣言をprice-valueクラスとprice-labelクラス（またはあなたのために働くクラス）に適用するだけです。

クラスとして適用する場合の問題align-rightは、テーブルをリファクタリングする場合は、マークアップとスタイルをやり直す必要があることです。セマンティッククラスを使用する場合は、CSSコンテンツのみのリファクタリングを回避できる可能性があります。さらに、要素にクラスを適用するのに時間がかかる場合は、そのクラスにセマンティック値を割り当てて、他のプログラマー（または3か月後）がマークアップをナビゲートしやすくすることをお勧めします。

これを考える1つの方法は、「このtdは何のためにあるのか」という質問を投げかけると、「align-right」という答えからは明確になりません。

Answer 4

Bootstrap のスタイルシートの後にロードされる「カスタム」スタイルシートを追加するだけです。したがって、クラス定義はオーバーロードされます。

このスタイルシートでは、配置を次のように宣言します。

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

これで、td 要素と th 要素に「共通の」配置規則を使用できるようになりました。

Answer 5

CSS にはすでにtext-align:right.AFAIK があるため、Bootstrap には特別なクラスがありません。

Bootstrap には、右にフローティング div などの「プルライト」があります。

Bootstrap 2.3 が登場し、テキスト配置スタイルが追加されました。

Bootstrap 2.3 リリース(2013-02-07)

Answer 6

ブートストラップ 4 がやってくる！Bootstrap でおなじみのユーティリティ クラスは、3.xブレークポイントが有効になりました。デフォルトのブレークポイントはxs、sm、md、lgおよびxlであるため、これらのテキスト配置クラスは のようになります.text-[breakpoint]-[alignnment]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要:これを書いている時点では、Bootstrap 4 は Alpha 2 のみです。これらのクラスとその使用方法は、予告なく変更される場合があります。

Answer 7

v3.3.5 でのテキスト配置のブートストラップ:

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen の例

Answer 8

次のコード行は正しく機能しています。text-center、left、right などのクラスを割り当てることができます。テキストはそれに応じて配置されます。

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

ここでは、外部クラスを作成する必要はありません。これらは Bootstrap クラスであり、独自のプロパティがあります。

Answer 9

この CSS は以下で使用できます。

.text-right {text-align: right} /* For right align */
.text-left {text-align: left} /* For left align */
.text-center {text-align: center} /* For center align */

Answer 10

.text-alignクラスは完全に有効であり、もはや役に立たない and を持つよりも使い.price-labelやすい.price-valueです。

カスタム ユーティリティ クラスを 100% 使用することをお勧めします。

.text-right {
  text-align: right;
}

私はいくつかの魔法をするのが好きですが、それはあなた次第です。

span.pull-right {
  float: none;
  text-align: right;
}

Answer 11

これは、例を含む短くて甘い答えです。

table{
    width: 100%;
}
table td, table th {
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <table>
    <tr>
      <th class="text-left">Text align left.</th>
      <th class="text-center">Text align center.</th>
      <th class="text-right">Text align right.</th>
    </tr>
    <tr>
      <td class="text-left">Text align left.</td>
      <td class="text-center">Text align center.</td>
      <td class="text-right">Text align right.</td>
    </tr>
  </table>
</body>

Answer 12

text-centerおお、Bootstrap 3 のリリースにより、 のクラスを中央揃え、text-left 左揃え、右揃え、両端揃えに使用できるようにtext-rightなりtext-justifyました。

Bootstrap は、一度使用すると非常にシンプルなフロントエンド フレームワークです。また、好みに合わせてカスタマイズするのも非常に簡単です。

Answer 13

を使用しtext-align:center !importantます。他のtext-alignCSS ルールが存在する可能性があるため、!importantは重要です。

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}

<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

Answer 14

Bootstrap 4.5 で動作していないように思われる場合はtext-sm-right、コンテンツがテーブルに対して多すぎて、テーブルがコンテナーの 100% に達していない可能性があることを考慮してください (たとえば、col)

表の幅を 100% にします。

 <table class="w-100">