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

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

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

and

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

当前回答

Bootstrap来了!在Bootstrap 3中熟悉的实用程序类。X现在是断点启用。默认的断点是:xs, sm, md, lg和xl,所以这些文本对齐类看起来像.text-[breakpoint]-[align]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要:在撰写本文时,Bootstrap 4只在Alpha 2中。这些类及其使用方式如有更改,恕不另行通知。

其他回答

我猜是因为CSS已经有了text-align:right, AFAIK, Bootstrap没有一个专门的类。

Bootstrap确实有“右拉”浮动divs等到右边。

Bootstrap 2.3刚刚出来,增加了文本对齐样式:

Bootstrap 2.3发布(2013-02-07)

在这三个类引导无效类

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

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

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

Bootstrap没有这样的类,但是这种类被认为是一个“实用工具”类,类似于“。@anton提到的“右拉”类。

如果你看看公用事业。很少你会看到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”的答案中得到澄清。

Bootstrap来了!在Bootstrap 3中熟悉的实用程序类。X现在是断点启用。默认的断点是:xs, sm, md, lg和xl,所以这些文本对齐类看起来像.text-[breakpoint]-[align]。

<div class="text-sm-left"></div> //or
<div class="text-md-center"></div> //or
<div class="text-xl-right"></div>

重要:在撰写本文时,Bootstrap 4只在Alpha 2中。这些类及其使用方式如有更改,恕不另行通知。

这是最简单的解决办法

你可以像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>

检查: 演示