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

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

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

and

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

当前回答

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>

其他回答

v3.3.5中的引导文本对齐:

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

CodePen例子

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
Left aligned text on viewports sized MD (medium) or wider. Left aligned text on viewports sized LG (large) or wider. Left aligned text on viewports sized XL (extra-large) or wider.

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

下面几行代码运行正常。你可以指定类,如文本中心,左或右,文本将相应地对齐。

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

这里不需要创建任何外部类。这些是Bootstrap类,它们有自己的属性。

这里有一个简短而甜蜜的回答和一个例子。

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>