在Twitter'的Bootstrap框架中,是否有一组可以对齐文本的类?
例如,我有一些带有"$"总数的表格,我想让它们向右对齐...
<th class="align-right">Total</th>
和
<td class="align-right">$1,000,000.00</td>
不,Bootstrap没有这样的类,但这种类被认为是一种"实用"类,类似于@anton提到的".pull-right"类。
如果你看一下utilities.less,你会发现Bootstrap中很少有实用类,原因是这种类一般不被看好,建议用于以下两种情况。 a) 原型设计和开发--这样你就可以快速建立你的页面,然后删除右拉和左拉类,而将浮动应用于更多语义类或元素本身,或 b)当它显然比更多语义的解决方案更实用时。
在你的案例中,根据你的问题,你似乎希望在你的表格中让某些文本向右对齐,但不是所有的文本。从语义上讲,最好是做这样的事情(我在这里只是编了几个类,除了默认的bootstrap类,.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内容进行重构就可以了。此外,如果要花时间将一个类应用于一个元素,那么最好的做法是尝试为该类分配语义价值,以便使标记对于其他程序员(或者三个月之后的你)来说更容易浏览。
一种思考方式是:当你提出问题"这个td是做什么用的?"时,你不会从答案"align-right"中得到澄清。
我猜是因为CSS已经有了text-align:right
,AFAIK,Bootstrap没有为它提供一个特殊的类。
Bootstrap确实有"pull-right"用于将div等浮动到右边。
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;
}