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

在bootstrap中，有哪些常见的方法可以在一个div容器内将一些文字左对齐，将另一些文字右对齐？

比如说

Total cost                   $42

以上总费用应该是左对齐的文本，42美元是右对齐的文本

Zim
已编辑的问题 23日 十月 2018 в 2:58
编程
user-interface twitter-bootstrap bootstrap-4
7日 九月 2013 в 10:40
30 种观点
解决办法

2018年更新...

Bootstrap 4.1+

  • pull-right现在是float-right。
  • text-right与3.x相同，可用于内联元素
  • float-*和text-*都是响应式，用于不同宽度的不同对齐方式（即：float-sm-right）。

flexbox工具（例如：justify-content-between）也可用于对齐。

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

或者，在任何灵活箱容器（行、导航条、卡片、D-flex等）中的自动边距（例如：ml-auto）。

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

Bootstrap 4 Align Demo
Bootstrap 4右对齐示例(float, flexbox, text-right, etc..)

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

Zim
编辑本段答案17日 八月 2018 в 12:03
评论(2)

与其使用pull-right类，不如在列中使用text-right类，因为pull-right有时在调整页面大小时产生问题。

Gargaroz
编辑本段答案22日 六月 2015 в 2:44
评论(0)
 
<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>

这应该可以完成工作

Mosh Feu
编辑本段答案3日 五月 2016 в 7:32
评论(0)