Bootstrap - 内部表的Text-align类

Question

Twitters Bootstrap Framework中是否有一组用于对齐文本的类？

例如,我有一些表格$,我想要与右边对齐...

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

和

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

Answer 1

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

Answer 2

使用Bootstrap 3.x text-right完美运行:

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

Answer 3

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

如果你看看utilities.less你会在Bootstrap中看到很少的实用程序类,原因是这种类通常不受欢迎,建议用于:a)原型设计和开发 - 这样你就可以快速构建出你的页面,然后删除右拉和左拉类,支持将浮点数应用于更多的语义类或元素本身,或b)当它显然比更语义的解决方案更实用时.

在您的情况下,根据您的问题,您希望表格中的某些文字对齐,但不是全部.在语义上,最好做一些类似的事情(我只是在这里组成几个类,除了默认的bootstrap类,.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声明应用于价格 - 价值和价格 - 标签类(或任何适合您的类).

应用于align-right类的问题是,如果要重构表,则必须重做标记和样式.如果你使用语义类,你可能只能重构css.另外,如果花时间将一个类应用于元素,最佳做法是尝试为该类分配语义值,以便标记更容易为其他程序员(或三个月后)导航.

想到这一点的一种方法是:当你提出问题"这是什么？"时,你不会从答案"对齐 - 右"得到澄清.

Answer 4

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

Answer 5

只需添加一个在Bootstrap样式表后加载的"自定义"样式表.所以类定义被重载了.

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

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

现在,您可以对td和th元素使用"通用"对齐约定.

Answer 6

我猜因为css已经有text-align:rightAFAIK bootstrap没有特殊的类.

Bootstrap确实为右侧的浮动div等"拉右".

UPDATE bootstrap 2.3刚出来并添加了文本对齐样式

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/

Answer 7

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中使用.这些类及其使用方式如有更改,恕不另行通知.

Answer 8

v3.3.5中的Bootstrap文本对齐.

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

CodePen示例

Answer 9

这些代码行正常工作.您可以分配文本中心,左侧或右侧等类,文本将相应对齐.

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

这里不需要创建任何外部类,这些是引导类并具有自己的属性.

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

Answer 11

.text-alignclass比完全有效且更有用,.price-label而且.price-value不再使用了.

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

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

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

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

Answer 12

Bootstrap 4为此提供了五个类：text-left、text-center、text-right和text-justify。text-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>

Answer 13

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

请参阅下面的示例以获得完整的解决方案

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

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

Answer 14

Ow,随着bootstrap 3的发布,你可以使用text-center中心对齐类,text-left 左对齐,text-right右对齐和text-justify对齐对齐.

一旦你使用Bootstrap,它就是一个非常简单的前端框架.而且非常适合定制以满足您的喜好.

Answer 15

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

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

Answer 16

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

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>