Bootstrap – 内部表的文本alignment类
Twitters Bootstrap Framework中是否有一组类alignment文本？
例如，我有一些表格，我想要alignment到右边…
<th class="align-right">Total</th>
和
<td class="align-right">$1,000,000.00</td>
Bootstrap 3
v3文本alignment文档
<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文本alignment文档
<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 3.x使用text-right完美的作品：
<td class="text-right"> text aligned </td>
不，Bootstrap没有这个类，但是这种类被认为是一个“工具”类，类似于@anton提到的“.pull-right”类。
如果你看看utilities.less，你将会在Bootstrap中看到很less的工具类，原因是这种类通常被忽略，build议用于：a）原型和开发 – 所以你可以快速构build然后删除右拉和左拉类，以便将浮点数应用于更多的语义类或元素本身，或者b）当它比更多的语义解决scheme更明确时。
在你的情况下，你的问题看起来像你希望某些文本在表格右边alignment，但不是全部。 从语义上来说，最好是做一些类似的事情（我只是在这里补充几个类，除了默认的引导类，.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。 另外，如果花费时间将一个类应用到元素，最好的做法是尝试将语义值分配给该类，以便标记更易于为其他程序员（或三个月后）导航。
有一种方法可以这样想：当你提出“这是什么东西？”这个问题的时候，你就不会从“alignment”的答案中得到澄清。
Bootstrap 2.3具有实用程序类文本左，文本右和文本中心，但它们不工作在表格单元格中。 直到引导3.0发布（他们已经解决了问题），我可以做出开关，我已经添加到我的网站CSS后，加载后bootstrap.css：
.text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; }
只需添加一个“自定义”样式表，该样式表在Bootstrap的样式表中加载。 所以类定义被重载。
在这个样式表中声明alignment如下：
.table .text-right {text-align: right} .table .text-left {text-align: left} .table .text-center {text-align: center}
现在你可以使用td和th元素的“通用”alignment约定。
我猜是因为CSS已经有text-align:right AFAIK bootstrap没有一个特殊的类。
Bootstrap确实有“右移”浮动div等等的权利。
更新引导2.3刚刚出来，并添加文本alignment方式
http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/
Bootstrap 4来了 ！ 在Bootstrap 3.x中熟悉的实用程序类现在已经启用了断点function。 默认断点是： xs ， sm ， md ， lg和xl ，所以这些文本alignment类看起来像.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.这些类及其使用方式如有更改，恕不另行通知。
在v3.3.5中引导文本alignment。
<p class="text-left">Left</p> <p class="text-center">Center</p> <p class="text-right">Right</p>
CodePen示例
这些代码行正常工作。 您可以像文本中心，左或右分配类，文本将相应地alignment。
<p class="text-center"> Day 1 </p> <p class="text-left"> Day 2 </p> <p class="text-right"> Day 3 </p>
这里不需要创build任何外部类，这些是引导类，并有自己的属性。
你可以使用下面的这个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*/
.text-align类是完全有效的，比具有.price-label使用的.price-label和.price-value更可用。
我build议去一个自定义的实用程序类叫100％
.text-right { text-align:right; }
我喜欢做一些魔术，但是这取决于你，
span.pull-right { float:none; text-align:right; }
噢，随着引导程序3的发布，您可以使用中心alignment的text-center类，左alignment的text-right左alignment，右alignment的text-justify右alignment和正确alignment的text-justifyalignment。
Bootstrap是一个非常简单的前端框架，一旦你使用它。 以及非常eaay定制，以适应你的喜好。
扩展大卫的答案，我只是添加一个简单的类来增加Bootstrap像这样：
.money, .number { text-align: right !important; }
我们有五个类，你可以参考这里： 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>
这里是简短而又甜蜜的回答。
table{width: 100%;} table td, table th{border: 1px solid #000;}
<script src="jquery-3.1.1.min.js"></script> <script src="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>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
视口大小MD（中）或更宽的左alignment文本。
左alignment的视口尺寸LG（大）或更宽的文本。
在视口大小为XL（超大）或更宽的左侧alignment文本。
在这三类引导无效的类
.text-right { text-align: right; } .text-center { text-align: center; } .text-left { text-align: left; }
这是最简单的解决scheme
您可以像文本中心，左或右分配类。 文本将相应地alignment这些类。 你不必分开上课。 这些类都内置在BootStrap 3中
<h1 class="text-center"> Heading 1 </h1> <h1 class="text-left"> Heading 2 </h1> <h1 class="text-right"> Heading 3 </h1>
在这里检查： 演示
如果您使用的是Bootstrap 3.x
<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
<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 3.x中熟悉的Boostrap 4实用程序类。 不同的是它现在是断点启用。 默认断点是：
xs, sm, md, lg and xl,所以这些文本alignment类看起来像.text- [breakpoint] – [alignnment]
