在bootstrap中,有哪些常见的方法可以在一个div容器内将一些文字左对齐,将另一些文字右对齐?
比如说
Total cost $42
以上总费用应该是左对齐的文本,42美元是右对齐的文本
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>
你也可以像这样使用text-right
类。
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
与其使用pull-right
类,不如在列中使用text-right
类,因为pull-right
有时在调整页面大小时产生问题。
<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>
这应该可以完成工作