用于表内部的文本对齐类

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

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

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

and

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

当前回答

Bootstrap 4有五个类:text left, text center, text right, text justify和text nowrap。

2016-07-14 12:26:49

其他回答

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

2013-04-05 17:58:49

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

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

只需添加一个“自定义”样式表，它在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

你可以使用下面的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 */

2015-10-08 08:29:26

在Bootstrap版本4。有一些内置的类来定位文本。

对表头和数据文本进行居中:

 <table>
    <tr>
      <th class="text-center">Text align center.</th>
    </tr>
    <tr>
      <td class="text-center">Text align center.</td>
    </tr>
  </table>

您还可以使用这个类来定位任何文本。

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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>

欲知详情

2019-11-03 07:08:10

用于表内部的文本对齐类

推荐文章

最新文章

标签