在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>
其他回答
我猜是因为CSS已经有了text-align:right, AFAIK, Bootstrap没有一个专门的类。
Bootstrap确实有“右拉”浮动divs等到右边。
Bootstrap 2.3刚刚出来，增加了文本对齐样式:
Bootstrap 2.3发布(2013-02-07)
下面几行代码运行正常。你可以指定类，如文本中心，左或右，文本将相应地对齐。
<p class="text-center">Day 1</p>
<p class="text-left">Day 2</p>
<p class="text-right">Day 3</p>
这里不需要创建任何外部类。这些是Bootstrap类，它们有自己的属性。
如果在Bootstrap 4.5中使用text-sm-right似乎不工作，请考虑可能内容对于表来说太多了，并且表不是在容器的100%(例如col)
使桌子100%宽:
<table class="w-100">
这是最简单的解决办法
你可以像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>
检查: 演示
这里有一个简短而甜蜜的回答和一个例子。
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>
