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

たとえば$、右に揃えたい合計のあるテーブルがあります...

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

そして

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

ブートストラップ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>

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

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

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

Utilities.lessを見ると、Bootstrapにユーティリティクラスはほとんど表示されません。その理由は、この種のクラスは一般に推奨されないため、次のいずれかに使用することをお勧めします。a）プロトタイピングと開発-すばやくビルドできるページを外してから、pull-rightクラスとpull-leftクラスを削除して、フロートをよりセマンティックなクラスまたは要素自体に適用するか、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: leftor text-align: right宣言をprice-valueクラスとprice-labelクラス（またはあなたのために働くどんなクラスでも）に適用するだけです。

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

それを考える1つの方法は次のとおりです。「これは何のためにあるのですか？」という質問をすると、「align-right」という回答から明確化されません。

ブートストラップ2.3はユーティリティクラスを持っているtext-left、text-rightとtext-center、彼らはテーブルセルでは動作しません。Bootstrap 3.0がリリースされ（問題が修正されて）、切り替えができるまで、これを自分のサイトのCSSに追加しましたbootstrap.css。

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

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

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

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

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

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

CSSにはすでにtext-align:right、AFAIK、Bootstrapには特別なクラスがないためだと思います。

Bootstrapには、右側にフローティングdivなどの「pull-right」があります。

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

Bootstrap 2.3がリリースされました（2013-02-07）

ブートストラップ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のみです。これらのクラスとその使用方法は、予告なしに変更される場合があります。

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

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

CodePenの例

次のコード行は正しく機能しています。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クラスであり、独自のプロパティがあります。

以下のこの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 */

.text-alignクラスは完全に有効となるよりも使用可能である.price-labelと.price-value、それ以上役に立たないいます。

と呼ばれるカスタムユーティリティクラスで100％行くことをお勧めします

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

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

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

例を挙げて短くて甘い答えを示します。

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>

Davidの答えを拡張して、次のようにBootstrapを拡張する単純なクラスを追加します。

.money, .number {
    text-align: right !important;
}

オウは、ブートストラップ3のリリースで、あなたがのクラスを使用することができtext-center、中央揃えのためにtext-left 、左の位置合わせのためにtext-right右の位置合わせのためにとtext-justify両端揃えのために。

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

これには5つのクラスがあり、ここから参照できます。http： //v4-alpha.getbootstrap.com/components/utilities/

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

これが最も簡単な解決策です

text-center、left、rightなどのクラスを割り当てることができます。テキストはこれらのクラスに合わせて配置されます。クラスを個別に作成する必要はありません。これらのクラスはBootStrap 3に組み込まれています

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

ここをチェック： デモ

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

Bootstrapバージョン4。テキストを配置する組み込みクラスがいくつかあります。

テーブルヘッダーとデータテキストを中央揃えにする場合：

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

このクラスを使用して、任意のテキストを配置することもできます。

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

詳細については

お役に立てば幸いです。

この3つのクラスでは、Bootstrapの無効なクラス

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

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

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

を使用し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>