在Bootstrap中的div内左对齐和右对齐

在bootstrap的div容器内，使某些文本左对齐和使其他文本右对齐的常见方法有哪些？

例如

Total cost                   $42

以上总费用应为左对齐文本，$ 42为右对齐文本

2018更新...

Bootstrap 4.1+

• pull-right 就是现在 float-right
• text-right 与3.x相同，适用于内联元素
• 两者float-*并text-*是响应为在不同宽度的不同比对（即：float-sm-right）

flexbox utils（例如：）justify-content-between也可以用于对齐：

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

或者，ml-auto在任何flexbox容器（行，导航栏，卡片，d-flex等）中自动设置边距（例如：）

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4对齐演示
Bootstrap 4右对齐示例（浮动，flexbox，文本右对齐等）

引导程序3

使用pull-right该类。

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

Bootstrap 3演示

您也可以使用这样的text-right类：

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

Bootstrap 3演示2

与使用pull-right类相比，最好text-right在列中使用类，因为pull-right有时在调整页面大小时会产生问题。

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

那应该做的就可以了