有哪些常用的方法来左对齐一些文本和右对齐一些其他文本在div容器在引导?

e.g.

Total cost                   $42

以上总成本应左对齐文本和42美元右对齐文本


当前回答

与其在列中使用右拉类,不如在列中使用文本右拉类,因为在调整页面大小时,右拉有时会产生问题。

其他回答

Bootstrap v4引入了flexbox支持

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

更多信息请访问https://v4-alpha.getbootstrap.com/utilities/flexbox/

与其在列中使用右拉类,不如在列中使用文本右拉类,因为在调整页面大小时,右拉有时会产生问题。

在Bootstrap 4中,正确的答案是使用text-xs-right类。

这是因为xs表示BS中最小的视口大小。如果你愿意,你可以使用text-md-right只在视口为中等或更大时应用对齐。

在最新的alpha版本中,text-xs-right被简化为text-right。

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

我们可以通过Bootstrap 4 Flexbox实现:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

例如:JSFiddle

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

这样应该就可以了