在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>
其他回答
如果在Bootstrap 4.5中使用text-sm-right似乎不工作,请考虑可能内容对于表来说太多了,并且表不是在容器的100%(例如col)
使桌子100%宽:
<table class="w-100">
我猜是因为CSS已经有了text-align:right, AFAIK, Bootstrap没有一个专门的类。
Bootstrap确实有“右拉”浮动divs等到右边。
Bootstrap 2.3刚刚出来,增加了文本对齐样式:
Bootstrap 2.3发布(2013-02-07)
Bootstrap没有这样的类,但是这种类被认为是一个“实用工具”类,类似于“。@anton提到的“右拉”类。
如果你看看公用事业。很少你会看到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: left或text-align: right声明应用到price-value类和price-label类(或任何适用于您的类)。
应用align-right作为一个类的问题是,如果你想重构你的表,你将不得不重做标记和样式。如果您使用语义类,则可以只重构CSS内容。另外,如果你花时间将一个类应用到一个元素上,最好尝试为这个类分配语义值,这样其他程序员(或者你三个月后)就可以更容易地浏览标记。
一种思考的方式是:当你提出“这个td是用来干什么的?”的问题时,你不会从“align-right”的答案中得到澄清。
v3.3.5中的引导文本对齐:
<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>
CodePen例子
Bootstrap 2.3具有文本左、文本右和文本中心实用程序类,但它们不能在表格单元格中工作。直到Bootstrap 3.0发布(他们已经修复了这个问题),我能够进行切换,我已经将此添加到我的网站CSS中,在Bootstrap . CSS之后加载:
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}