在表格内部使用的文本对齐类

Question

Twitter的Bootstrap框架中有一组类可以对齐文本吗？

例如，我有一些带有$总计的表格，我想将它们右对齐...

<th class="align-right">Total</th>

和

<td class="align-right">$1,000,000.00</td>

- mylesthe.dev

Answer 1

Bootstrap 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>

---

Bootstrap 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>

---

Bootstrap 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>

- Michael J. Calkins

---

很遗憾，这对于表格单元格不起作用。可能只是CSS顺序问题。请查看此问题[https://github.com/twitter/bootstrap/issues/6837]。应该在3.0版本中修复。 - David

目前我使用 <td><div class='text-center'>bootin</div></td> 来解决这个问题。 - Michael J. Calkins

我希望Bootstrap在这个类中使用断点，例如：text-right-md，仅用于中等屏幕及以上大小的文本右对齐。 - Eric Bishard

<p class="text-left">左对齐文本。</p> <p class="text-center">居中对齐文本。</p> <p class="text-right">右对齐文本。</p> <p class="text-justify">两端对齐文本。</p> <p class="text-nowrap">不换行文本。</p> - user5026837

这并不是一个与问题相关的准确答案... Bootstrap 4 的示例并不适用于表格。问题是关于表格的。 - GRowing

Answer 2

使用 Bootstrap 3.x，使用 text-right 完美地运行：

<td class="text-right">
  text aligned
</td>

- Paolo Casciello

---

您也可以将其应用于整行，例如：<tr class="text-right"> <td>文本对齐</td> </tr> - Glade Mellor

同时适用于Bootstrap 4。 - Al Martins

Answer 3

不，Bootstrap没有这样的类，但是这种类被认为是"实用"类，类似于@anton提到的“.pull-right”类。 如果您查看utilities.less，您会发现Bootstrap中很少有实用程序类，原因是这种类通常不受欢迎，并建议用于以下两种情况之一： a）原型设计和开发-这样您可以快速构建页面，然后删除.pull-right和.pull-left类，以更语义化的类或元素本身应用浮动，或 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” 不会提供澄清。

- jonschlinkert

---

顺便说一句，我相信你可以用比我选择的类名更好的方式来做。但那不是重点。 - jonschlinkert

当时他们没有这样做，我认为现在仍然不应该这样做。 - jonschlinkert

Answer 4

Bootstrap 2.3有实用类text-left，text-right和text-center，但它们不能在表格单元格中使用。在Bootstrap 3.0发布之前（他们已经解决了这个问题），并且我能够进行切换之前，我已经将这个内容添加到我的网站CSS中，该CSS在bootstrap.css加载后加载：

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

- David

Answer 5

只需添加一个“自定义”样式表，该样式表在Bootstrap的样式表之后加载。因此，类定义被重载。

在这个样式表中声明对齐方式如下：

.table .text-right {text-align: right}
.table .text-left {text-align: left}
.table .text-center {text-align: center}

现在你可以使用“常见”的td和th元素对齐约定。

- Michael

Answer 6

我猜因为CSS已经有了 text-align:right，就我所知，Bootstrap没有专门的类来实现它。

不过Bootstrap提供了 "pull-right" 来将div等元素向右浮动。

Bootstrap 2.3刚刚发布并添加了文本对齐样式：

Bootstrap 2.3发布 (2013年2月7日)

- Anton

---

是的，我不想在每个元素上使用内联样式。我知道pull-right，但我不想让元素浮动。如果没有类，我可能会添加一个类 :) - mylesthe.dev

Answer 7

Bootstrap 4 即将到来！在 Bootstrap 3.x 中熟悉的实用类现在已支持断点。默认的断点是：xs、sm、md、lg 和 xl，所以这些文本对齐类看起来像是 .text-[breakpoint]-[alignnment]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要提示：撰写本文时，Bootstrap 4只发布了Alpha 2版本。这些类及其使用方式可能会在不事先通知的情况下发生变化。

- dKen

---

在阅读有关在Bootstrap 4安装上的Bootstrap 3文档时，这让我感到措手不及。谢谢提醒！ - Ben Simpson

Answer 8

Bootstrap 3.3.5中的文本对齐：

 <p class="text-left">Left</p>
 <p class="text-center">Center</p>
 <p class="text-right">Right</p>

CodePen示例

- Peter Girnus

Answer 9

以下代码正常运行。您可以像text-center、left或right这样分配类，文本将相应地对齐。

<p class="text-center">Day 1</p> 
<p class="text-left">Day 2</p> 
<p class="text-right">Day 3</p>

这里并不需要创建任何外部类。这些都是Bootstrap的类，拥有它们自己的属性。

- Vanshaj Rai

Answer 10

您可以使用以下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 */

- kushal kant