762

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

例如,我有一些表格的$总数要向右对齐...

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

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

22 回答 22

1491

引导程序 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 3 文本对齐示例


引导程序 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 4 文本对齐示例


引导程序 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-28T16:03:10.433 回答
84

使用 Bootstrap 3.x usingtext-right效果很好:

<td class="text-right">
  text aligned
</td>
于 2014-02-10T15:55:50.593 回答
47

不,Bootstrap 没有这样的类,但这种类被认为是“实用程序”类,类似于@anton 提到的“.pull-right”类。

如果您查看实用程序.less,您会在 Bootstrap 中看到很少的实用程序类,原因是这种类通常不受欢迎,建议用于:a) 原型设计和开发 - 这样您就可以快速构建退出您的页面,然后删除 pull-right 和 pull-left 类,以便将浮动应用于更多语义类或元素本身,或者 b) 当它明显比更语义化的解决方案更实用时。

在您的情况下,根据您的问题,您似乎希望某些文本在表格的右侧对齐,但不是全部。从语义上讲,最好做一些类似的事情(我只是在这里组成几个类,除了默认的引导类,.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: leftortext-align: right声明应用于 price-value 和 price-label 类(或任何适合您的类)。

作为一个类应用的问题align-right是,如果你想重构你的表,你将不得不重做标记和样式。如果您使用语义类,您可能可以只重构 CSS 内容而侥幸成功。另外,如果花时间将类应用于元素,最好尝试为该类分配语义值,以便其他程序员(或三个月后)更容易导航标记。

一种思考方式是:当你提出“这个 td 是做什么用的?”的问题时,你不会从答案“align-right”中得到澄清。

于 2012-10-11T00:10:03.273 回答
37

Bootstrap 2.3 具有实用程序类text-lefttext-righttext-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;
}
于 2013-04-05T17:58:49.407 回答
27

只需添加在 Bootstrap 样式表之后加载的“自定义”样式表。所以类定义被重载。

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

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

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

于 2013-06-04T11:20:32.427 回答
23

我猜是因为 CSS 已经有text-align:rightAFAIK,所以 Bootstrap 没有专门的类。

Bootstrap 确实有“向右拉”,用于向右浮动 div 等。

Bootstrap 2.3 刚出来并添加了文本对齐样式:

Bootstrap 2.3 发布(2013-02-07)

于 2012-10-10T22:52:36.540 回答
15

Bootstrap 4 来了!Bootstrap3.x中熟悉的实用程序类现在启用了断点。默认断点是:xssm、和md,因此这些文本对齐类看起来像.lgxl.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 中。这些类及其使用方式如有更改,恕不另行通知。

于 2016-03-18T14:42:09.200 回答
12

v3.3.5 中的引导文本对齐:

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

代码笔示例

于 2015-10-14T22:02:38.413 回答
11

以下代码行正常工作。您可以分配文本中心、左或右等类,文本将相应对齐。

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

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

于 2015-05-22T06:30:22.130 回答
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 */
于 2015-10-08T08:29:26.787 回答
8

该类.text-align是完全有效的,并且比拥有一个.price-label并且.price-value不再有用的更有用。

我建议使用一个名为的自定义实用程序类 100%

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

我喜欢做一些魔术,但这取决于你,比如:

span.pull-right {
  float: none;
  text-align: right;
}
于 2013-02-08T02:59:39.473 回答
7

这是一个简短而甜蜜的答案,有一个例子。

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-31T07:00:58.177 回答
6

哦,随着 Bootstrap 3 的发布,您可以使用text-center中心对齐、text-left 左对齐、text-right右对齐和text-justify两端对齐的类。

Bootstrap 是一个非常简单的前端框架,一旦你使用它就可以使用它。并且非常容易定制以适合您的喜好。

于 2015-07-17T20:37:49.987 回答
6

扩展大卫的答案,我只是添加一个简单的类来增强 Bootstrap,如下所示:

.money, .number {
    text-align: right !important;
}
于 2016-03-01T01:38:29.983 回答
4

Bootstrap 4对此有五个类:text-lefttext-centertext-right和。text-justifytext-nowrap

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-left">Left aligned text.</div>
<div class="text-center">Center aligned text.</div>
<div class="text-right">Right aligned text.</div>
<div class="text-justify">Justified text starts here. The quick brown fox jumps over the lazy dog. Justified text ends here.</div>
<div class="text-nowrap">No wrap text starts here. The quick brown fox jumps over the lazy dog. No wrap text ends here.</div>

于 2016-07-14T12:26:49.957 回答
3

这是最简单的解决方案

您可以分配文本中心、左或右等类。文本将相应地与这些类对齐。您不必单独上课。这些类内置在 BootStrap 3 中

    <h1 class="text-center"> Heading 1 </h1> 
    <h1 class="text-left"> Heading 2 </h1> 
    <h1 class="text-right"> Heading 3 </h1>

在这里检查: 演示

于 2017-01-27T11:31:15.100 回答
3

在 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-03T07:08:10.143 回答
2

引导程序 5

v5 文本对齐文档

在 Bootstrap 版本 5 中,更改了文本对齐实用程序类。使用以下新类来对齐文本:

  • text-left text-start用于左对齐。
  • text-center用于中心对齐。
  • text-right text-end用于右对齐。

此类也可以在表中使用。右对齐单元格内的文本

    <td class="text-end">$1,000.00</td>

如果要在整列中右对齐文本,可以使用 cssnth-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-11T10:12:59.997 回答
1
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
视口大小为 MD(中)或更宽的左对齐文本。

在 LG(大)或更宽的视口上左对齐文本。

在 XL(特大)或更宽的视口上左对齐文本。

于 2017-03-08T12:20:09.063 回答
1

使用text-align:center !important. 可能还有其他text-aligncss规则,所以!important很重要。

table,
th,
td {
  color: black !important;
  border-collapse: collapse;
  background-color: yellow !important;
  border: 1px solid black;
  padding: 10px;
  text-align: center !important;
}
<table>
  <tr>
    <th>
      Center aligned text
    </th>
  </tr>
  <tr>
    <td>Center aligned text</td>
    <td>Center aligned text</td>
  </tr>
</table>

于 2020-05-16T22:29:03.310 回答
0

在这三个类 Bootstrap 无效类

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

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

 .text-left {
    text-align: left; }
于 2016-02-10T11:50:20.983 回答
0

如果它似乎在 Bootstrap 4.5 中不起作用,text-sm-right请考虑到表格的内容可能太多并且表格不在容器的 100% 处(例如 col)

在此处输入图像描述

使表格 100% 宽:

 <table class="w-100">
于 2021-01-03T04:16:48.157 回答