在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
在Twitter的Bootstrap框架中是否有一组对齐文本的类?
例如,我有一些包含$ total的表格,我希望它们向右对齐……
<th class="align-right">Total</th>
and
<td class="align-right">$1,000,000.00</td>
当前回答
在Bootstrap版本4。有一些内置的类来定位文本。
对表头和数据文本进行居中:
<table>
<tr>
<th class="text-center">Text align center.</th>
</tr>
<tr>
<td class="text-center">Text align center.</td>
</tr>
</table>
您还可以使用这个类来定位任何文本。
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-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有五个类: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>
下面几行代码运行正常。你可以指定类,如文本中心,左或右,文本将相应地对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
这里不需要创建任何外部类。这些是Bootstrap类,它们有自己的属性。
在这三个类引导无效类
.text-right {
text-align: right; }
.text-center {
text-align: center; }
.text-left {
text-align: left; }
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;
}
引导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>
引导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>
引导5
v5文本对齐文档
Text-left已被text-start取代, Text-right已被text-end取代
<p class="text-start">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-end">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>