在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中。这些类及其使用方式如有更改,恕不另行通知。

其他回答

我猜是因为CSS已经有了text-align:right, AFAIK, Bootstrap没有一个专门的类。

Bootstrap确实有“右拉”浮动divs等到右边。

Bootstrap 2.3刚刚出来,增加了文本对齐样式:

Bootstrap 2.3发布(2013-02-07)

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;
}

只需添加一个“自定义”样式表,它在Bootstrap的样式表之后加载。所以类定义是重载的。

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

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

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

引导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>

使用text-align:center !重要。可能有其他的文本对齐css规则,所以!important是重要的。

表格 th, td { 颜色:黑色!重要; border-collapse:崩溃; 背景颜色:黄色! 边框:1px纯黑色; 填充:10 px; Text-align: center ! } <表> < tr > < th > 居中对齐文本 < / th > < / tr > < tr > <td>居中对齐文本</td> <td>居中对齐文本</td> < / tr > 表> < /