Twitters Bootstrap Framework中是否有一组类对齐文本？

例如，我有一些表$总计，我想靠右对齐...

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

和

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

---

Bootstrap 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>

Bootstrap 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>

---

使用Bootstrap 3.x使用text-right完美地工作：

<td class="text-right">
  text aligned
</td>

---

不，Bootstrap没有类，但是这种类被认为是“实用程序”类，类似于@anton提到的“.pull-right”类。

如果您查看utilities.less，您将在Bootstrap中看到很少的实用程序类，原因是这种类通常被忽略，建议用于以下任一方面：a）原型开发和开发 - 所以您可以快速构建取出你的页面，然后删除右拉和左拉类，以便将浮点应用到更多的语义类或元素本身，或者b）当它明显比更多语义解决方案更实用时。

在你的情况下，你的问题看起来像你希望某些文本在表格右边对齐，但不是全部。 从语义上来说，最好做一些类似的事情（我只想在这里组成几个类，除了默认的引导类，.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。 另外，如果花费时间将一个类应用到元素，最好尝试将语义值分配给该类，以便标记更易于为其他程序员（或三个月后）导航。

想一想的一个方法是：当你提出“这个td是什么？”这个问题时，你不会从“align-right”的答案中得到澄清。

链接地址: http://www.djcxy.com/p/15521.html

上一篇: Bootstrap

下一篇: Bootstrap responsive grid layout