用于表内部的文本对齐类

在Twitter的Bootstrap框架中是否有一组对齐文本的类?

例如，我有一些包含$ total的表格，我希望它们向右对齐……

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

and

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

当前回答

现在，随着Bootstrap 3的发布，你可以使用text-center类进行中心对齐，text-left类进行左对齐，text-right类进行右对齐，text-justify类进行对齐。

Bootstrap是一个非常简单的前端框架，一旦你使用它。以及非常容易定制，以满足您的喜好。

2015-07-17 20:37:49

其他回答

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

2013-02-28 16:03:10

这里有一个简短而甜蜜的回答和一个例子。

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>

2016-12-31 07:00:58

在这三个类引导无效类

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

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

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

2016-02-10 11:50:20

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

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

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

Bootstrap 2.3发布(2013-02-07)

2012-10-10 22:52:36

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

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

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

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

2013-06-04 11:20:32

用于表内部的文本对齐类

推荐文章

最新文章

标签