在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<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>
引导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>
其他回答
我猜是因为CSS已经有了text-align:right, AFAIK, Bootstrap没有一个专门的类。
Bootstrap确实有“右拉”浮动divs等到右边。
Bootstrap 2.3刚刚出来,增加了文本对齐样式:
Bootstrap 2.3发布(2013-02-07)
.text-align类完全有效,比.price-label和.price-value更有用,后者已经没有任何用处了。
我建议100%使用自定义实用程序类
.text-right {
text-align: right;
}
我喜欢施魔法,但那取决于你,比如
span.pull-right {
float: none;
text-align: right;
}
扩展David的回答,我只是添加了一个简单的类来增强Bootstrap,像这样:
.money, .number {
text-align: right !important;
}
在这三个类引导无效类
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
你可以使用下面的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 */