有哪些常用的方法来左对齐一些文本和右对齐一些其他文本在div容器在引导?
e.g.
Total cost $42
以上总成本应左对齐文本和42美元右对齐文本
有哪些常用的方法来左对齐一些文本和右对齐一些其他文本在div容器在引导?
e.g.
Total cost $42
以上总成本应左对齐文本和42美元右对齐文本
当前回答
在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/
2021年更新……
引导5 (beta)
对齐在一个flexboxdiv或行…
Ml-auto现在是ms-auto Mr-auto现在是me-auto了
对于文本对齐或浮动..
Text-left现在是text-start Text-right现在是text-end 左浮动现在是浮动启动 右浮点现在是右浮点
引导 4+
右拉现在变成右浮动了 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>
引导4对齐演示 Bootstrap 4右对齐示例(float, flexbox, text-right等…)
引导3
使用右拉类..
<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>
引导3演示2
与其在列中使用右拉类,不如在列中使用文本右拉类,因为在调整页面大小时,右拉有时会产生问题。
<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>
这样应该就可以了
在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>