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 3文本对齐示例

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 4文本对齐示例

使用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: lefttext-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。 默认断点是: xssmmdlgxl ,所以这些文本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="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> 
 <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]