Bootstrap - 内部テーブルのテキスト整列クラス
Twitters Bootstrap Frameworkにテキストを揃えるクラスのセットはありますか？
例えば。 $の合計がいくつかあるテーブルがあり、それらを右寄せにしたいのですが….
<th class="align-right">Total</th>
そして
<td class="align-right">$1,000,000.00</td>
ブートストラップ3
<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
<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>
text-rightを使ったBootstrap 3.xの使用は完全に機能します。
<td class="text-right">
text aligned
</td>
いいえ、Bootstrapにはそのためのクラスがありませんが、この種のクラスは@antonが述べた「.pull-right」クラスと同様の「ユーティリティ」クラスと見なされます。
Utilities.lessを見れば、Bootstrapには非常に少数のユーティリティクラスしか見られないでしょう。その理由は、この種のクラスは一般的に眉をひそめており、次のいずれかに使用することをお勧めするからです。あなたのページを削除してから、より意味的なクラスや要素そのものにフロートを適用するためにプルライトクラスとプル左クラスを削除するか、または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: leftまたはtext-align: right宣言をprice-valueクラスとprice-labelクラスに適用してください（あるいはあなたのために働くすべてのクラス）。
クラスとしてalign-rightを適用することに関する問題は、あなたがあなたのテーブルをリファクタリングしたいのであれば、あなたはマークアップとスタイルをやり直さなければならないだろうということです。セマンティッククラスを使用する場合は、CSSのみをリファクタリングすることで回避できる可能性があります。さらに、要素にクラスを適用するのに時間がかかる場合は、マークアップが他のプログラマーのためにナビゲートしやすくなるように（または3か月後に）そのクラスに意味値を割り当てることを試みることをお勧めします。
それを考える一つの方法はこれです：あなたが「これは何のためにあるのですか？」という質問を投げかけるとき、あなたは答え「右寄せ」からはっきりしないでしょう。
Bootstrap 2.3には、text-left、text-right、およびtext-centerというユーティリティクラスがありますが、テーブルセルでは機能しません。 bootstrap 3.0がリリースされるまで（問題が解決したところで）スイッチを入れることができるようになるまで、私はこれをbootstrap.cssの後にロードされる私のサイトの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ブートストラップが用意されているので特別なクラスはありません。
ブートストラップには、浮動小数点divなどを右側に "pull-right"する機能があります。
_ update _ bootstrap 2.3が出てきて、テキストの配置スタイルを追加しました
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/ /
ブートストラップ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>
これらのコード行は正しく機能しています。あなたは左または右、テキストの中心のようなクラスを割り当てることができます。テキストはそれに応じて整列します。
<p class="text-center"> Day 1 </p>
<p class="text-left"> Day 2 </p>
<p class="text-right"> Day 3 </p>
ここでは外部クラスを作成する必要はありません。これらはブートストラップクラスであり、独自のプロパティを持ちます。
あなたは以下のこの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;
}
そのため、ブートストラップ3のリリースでは、中央揃えにtext-center、左揃えにtext-left、右揃えにtext-right、正当な配置にtext-justifyのクラスを使用できます。
ブートストラップは、いったん利用すれば、非常にシンプルなフロントエンドフレームワークです。あなたの好みに合うようにカスタマイズすることは非常に簡単です。
これは簡単でわかりやすい例です。
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;
}
そのためのクラスが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>
このスリークラスのブートストラップでは無効なクラス
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }