在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如，我有一些包含$ total的表格，我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
当前回答
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”的答案中得到澄清。
其他回答
这里有一个简短而甜蜜的回答和一个例子。
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>
Bootstrap 4有五个类:text left, text center, text right, text justify和text nowrap。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <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 starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div> <div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>
引导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>
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”的答案中得到澄清。
在这三个类引导无效类
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
