在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如，我有一些包含$ total的表格，我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
当前回答
Bootstrap来了!在Bootstrap 3中熟悉的实用程序类。X现在是断点启用。默认的断点是:xs, sm, md, lg和xl，所以这些文本对齐类看起来像.text-[breakpoint]-[align]。
<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>
重要:在撰写本文时，Bootstrap 4只在Alpha 2中。这些类及其使用方式如有更改，恕不另行通知。
其他回答
.text-align类完全有效，比.price-label和.price-value更有用，后者已经没有任何用处了。
我建议100%使用自定义实用程序类
.text-right {
text-align: right;
}
我喜欢施魔法，但那取决于你，比如
span.pull-right {
float: none;
text-align: right;
}
如果在Bootstrap 4.5中使用text-sm-right似乎不工作，请考虑可能内容对于表来说太多了，并且表不是在容器的100%(例如col)
使桌子100%宽:
<table class="w-100">
使用BootstrapX使用text-right完美工作:
<td class="text-right">
text aligned
</td>
在这三个类引导无效类
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
引导5
V5文本对齐文档
在Bootstrap版本5中，文本对齐实用程序类被更改。使用以下新类来对齐文本:
Text-left text-start用于左对齐。 Text-center用于中心对齐。 右文本-右文本-结束右对齐。
这些类也可以在表中使用。向右对齐单元格中的文本
<td class="text-end">$1,000.00</td>
如果你想在整个列中右对齐文本，你可以使用css第n -child属性
/* || right aligns text of third column; change 3 to your desired column number*/
tr > th:nth-child(3),
tr > td:nth-child(3) {
text-align: right;
}
完整的解决方案参考下面的例子
/* to right align text within whole column */ .custom-table tr>th:nth-child(3), .custom-table tr>td:nth-child(3) { text-align: right; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <body> <table class="table table-bordered custom-table"> <thead> <tr> <th scope="col">Date</th> <th scope="col">Customer</th> <th scope="col">Total</th> </tr> </thead> <tbody> <tr> <td>11 May 2021</td> <td>Paula Allen</td> <td>$104.98</td> </tr> <tr> <td>10 May 2021</td> <td class="text-end">Kevin(right-align)</td> <td>$233.00</td> </tr> <tr> <td>09 May 2021</td> <td>Joyes Murray</td> <td>$170.25</td> </tr> </tbody> </table> </body>
