用于表内部的文本对齐类

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

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

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

and

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

当前回答

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

2021-05-11 10:12:59

其他回答

使用BootstrapX使用text-right完美工作:

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

2014-02-10 15:55:50

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

使用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 > 表> < /

2020-05-16 22:29:03

在这三个类引导无效类

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

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

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

2016-02-10 11:50:20

在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

用于表内部的文本对齐类

推荐文章

最新文章

标签