在Bootstrap中左alignment并右alignmentdiv
什么是一些常见的方法来左alignment一些文本，并在引导中alignmentdiv容器内的其他文本？
例如
Total cost $42 总成本以上应该是左alignment的文本和$ 42是正确的alignment的文本
使用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>
演示
你也可以像这样使用text-right类：
<div class="row"> <div class="col-md-6">Total cost</div> <div class="col-md-6 text-right">$42</div> </div>
演示
2017 – 更新Bootstrap 4
-
pull-right现在是float-right -
text-right与3.x相同 -
float-*和text-*都对不同宽度的alignment响应 （即：float-sm-right）
此外，flexbox utils可用于alignment：
<div class="d-flex justify-content-between"> <div> left </div> <div> right </div> </div>
Bootstrap 4alignment演示
而不是使用pull-right类，最好在列中使用text-right类，因为在调整页面大小的时候， pull-right会产生问题。
在Bootstrap 4中，正确的答案是使用 text-xs-right类。
这是有效的，因为xs表示BS中最小的视口大小。 如果你愿意，你可以通过使用text-md-right来仅在视口大于或等于中间时应用alignment。
在最新的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/了解更多信息;
<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>
这应该做的工作就好了
<div style="width:100%;"> <div style="width:100%;"> <div style="width:50%;float:left">Total cost</div><div style="width:50%;float:right">$42</div> </div> </div>
