724

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

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

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

和

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

— Mediabeastnz
source

1412

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

— 迈克尔·J·卡尔金斯
source

29

不幸的是，这不适用于表格单元。这可能只是CSS订单问题。见这个问题[ github.com/twitter/bootstrap/issues/6837]。应该在3.0版中修复。

— 大卫，

26

Atm我要做<td> <div class ='text-center'> bootin </ div> </ td>来解决这个问题。

— Michael J. Calkins

3

我希望bootstrap在此类中使用断点，例如：text-right-md仅将文本向右对齐（仅中等）。

— 埃里克·比斯哈德

2

左对齐文本。 居中对齐文本。 右对齐文本。 正义文本。 没有自动换行文本。

— 2016年

1

我尝试使用text-md-right（和xs＆lg）很奇怪，但是它们不起作用。我在Codepen中工作，所以可能与它有关。无论如何，这个答案对我有用。谢谢！

— 埃德森，2016年

76

使用Bootstrap 3.x text-right可以完美地工作：

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

— 保罗·卡西洛
source

您也可以将其应用于整个行：<tr class =“ text-right”> <td>文本对齐</ td> </ tr>

— Glade Mellor

46

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

如果您看utilities.less，那么在Bootstrap中将看到很少的实用程序类，原因是这种类通常不被接受，建议用于以下任何一种：a）原型设计和开发-这样您就可以快速构建移出页面，然后删除右上角和左上角类，以便将浮点数应用于更多的语义类或元素本身，或者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: left或text-align: right声明应用于price-value和price-label类（或任何适合您的类）。

align-right用作类的问题是，如果要重构表，则必须重做标记和样式。如果使用语义类，则可能仅重构CSS内容就可以摆脱困境。另外，如果花时间将类应用于元素，则最佳实践是尝试为该类分配语义值，以使标记易于其他程序员（或三个月后使用）浏览。

想到它的一种方法是：当您提出问题“此td代表什么？”时，您将无法从“ align-right”答案中得到澄清。

— jonschlinkert
source

1

顺便说一句，我相信您可以使用类名比我选择的做的更好。但这不是重点

— jonschlinkert 2012年

3

当时他们没有，IMO仍然不应该。

— jonschlinkert

34

Bootstrap 2.3具有，和实用程序类text-left，但它们在表单元格中不起作用。在发布Bootstrap 3.0之前（他们已解决了该问题），并且我能够进行切换，我将其添加到了在以下位置加载的CSS ：text-righttext-centerbootstrap.css

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

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

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

— 大卫
source

26

只需添加一个“自定义”样式表，该样式表将在Bootstrap的样式表之后加载。因此，类定义被重载。

在此样式表中，声明对齐方式如下：

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

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

— 麦可
source

23

我猜是因为CSS已经有了text-align:right，AFAIK，Bootstrap没有特殊的类。

Bootstrap的右侧确实具有用于浮动div等的“向右拉”功能。

Bootstrap 2.3刚发布并添加了文本对齐样式：

Bootstrap 2.3发布（2013-02-07）

— 安东
source

1

是的，我不想在每个元素上使用内联样式。我知道右拉，但我不想让这些元素浮动。如果没有，我可能会添加一个类:)

— Mediabeastnz '10 October

15

Bootstrap 4来了！在Bootstrap 3.x中熟悉的实用程序类现在已启用断点。默认的断点：xs，sm，md，lg和xl，因此这些文本对齐类看起来像.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中使用。这些类及其使用方式如有更改，恕不另行通知。

— 肯
source

在阅读有关Bootstrap 4安装的Bootstrap 3文档时，这使我措手不及。感谢您的提醒！

— 本辛普森

12

v3.3.5中的自举文本对齐方式：

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

CodePen示例

— 哥德伯兹
source

11

以下代码行正常工作。您可以分配诸如文本居中，向左或向右的类，文本将相应对齐。

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

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

— 范沙吉·赖（Vanshaj Rai）
source

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 */

— 库什尔·康德
source

8

的.text-align类是完全有效的，比具有更多可用的.price-label和.price-value它们是没有用的任何更多。

我建议100％使用一个名为

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

我喜欢做一些魔术，但这取决于您，例如：

span.pull-right {
  float: none;
  text-align: right;
}

— 巴特·卡利克斯托（Bart Calixto）
source

1

是的，每个类都是完全“有效的”，但这不是语义的。您应该在生产代码中谨慎使用实用程序类，这些实用程序类用于“引导”。

— jonschlinkert

3

因为w3说这是使用clase的正确方法，并不意味着它是最好的。如果不是因为“非语义”类，就不会存在jQuery UI和Bootstrap。人们倾向于将语义用于小节，直到他们意识到寻求通用性在各个方面都更好。一开始很难获得它，或者认为它确实不错，我走了那条路……

— Bart Calixto

1

jQuery UI是一个不好的例子，因为它是一个还包含CSS 的JavaScript库，并且正如我所指出的，Bootstrap使用实用程序类作为UTILITIES。您是否想过为什么Bootstrap被称为Bootstrap？这样您就可以使用这些类进行开发，并在生产代码中对其进行更改。我并没有说根本不使用它们，而是使用了向左拉，向右拉的方式。而且我有时还会使用文本中心。但是我很少使用它们，并且我不建议其他人将它们用于更好，更语义的选项。

— jonschlinkert

1

jQuery UI只是一个例子。我正在谈论的方法是使库工作的原因。我们可以看到剑道，蓝图，网格，960，Chico UI，甚至Bootstrap本身都可以做到这一点。这是该库可以存在/工作的唯一方式。您可以看一下主要公司如何使用Apple之类的CSS（images.apple.com/v/imac/a/styles/imac.css），您会印象深刻。那是生产力和大事的原因。老实说，我很惊讶，没有找到解释此问题的教程。我认为术语“引导”是因为它是您必须开始而不是以后更改的东西。

— Bart Calixto

6

扩展David的答案，我只是添加了一个简单的类来扩展Bootstrap，如下所示：

.money, .number {
    text-align: right !important;
}

— op
source

6

这是一个简短而甜蜜的答案，并带有示例。

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>

展开摘要

— Hitesh
source

是HTML标签link，并script超出了有效head或body标签？为什么不提供完整且有效的HTML文档示例？

— 彼得·莫滕森

5

噢，随着Bootstrap 3的发布，您可以将类别text-center用于中心对齐，text-left 左对齐，text-right右对齐和text-justify合理对齐。

一旦使用Bootstrap，它就是一个非常简单的前端框架。以及非常易于定制以适合您的喜好。

— 乔丹·D·安格斯
source

3

为此，我们有五个类，您可以从这里参考：http : //v4-alpha.getbootstrap.com/components/utilities/

<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.</div>
<div class="text-nowrap">No wrap text.</div>

展开摘要

— 加内什·普塔（Ganesh Putta）
source

3

这是最简单的解决方案

您可以分配类，例如text-center，left或right。文本将与这些类相对应。您不必单独制作课程。这些类是BootStrap 3中内置的

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

检查这里：演示

— 瓦利
source

1

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>

视口大小为MD（中）或更宽的视口上的左对齐文本。

在大小为LG（大）或更宽的视口上左对齐文本。

尺寸为XL（超大）或更大的视口上的左对齐文本。

— 乌马尔·贾米尔
source

1

在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>

更多细节

希望对您有帮助。

— Majedur Rahaman
source

0

这三个类中的Bootstrap无效类

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

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

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

— 阿舒设计师
source

5

该问题已经有好几个高质量的答案，其中大多数是三年前问这个问题时发布的。为了提高您的编程能力，尝试回答诸如此类之类的简单问题可能是值得的练习，但将其以当前状态发布不会对问题产生任何影响。如果您的答案有些新颖，请用几句话来说明它的不同之处以及为什么这样做会更好。

— MTCoster

什么是你的意思“在这三类引导无效的类”？你能详细说明吗？特别是对于“无效类”。

— 彼得·莫滕森

0

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

展开摘要

— 贾斯汀·刘
source

表格内部的文本对齐类

引导程序3

引导程序4

这是最简单的解决方案