Bootstrap 4:col align right
问题描述:
我试图创建一个2列的行。左边一列,内容左对齐,第二列右边内容对齐(旧右拉)。Bootstrap 4:col align right
如何在alpha-6中执行此操作?
我试过一些东西,但这是我迄今为止。我错过了什么?
<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
答
使用float-right
块元素,或text-right
内联元素:
<div class="row">
<div class="col">left</div>
<div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
<div class="col">left</div>
<div class="col">
<div class="float-right">element needs to be right aligned</div>
</div>
</div>
http://www.codeply.com/go/oPTBdCw1JV
如果float-right
不能正常工作,记得引导4是现在flexbox,还有很多元素为display:flex
,这可以防止float-right
工作。
在一些情况下,实用程序类等align-self-end
或ml-auto
工作右对齐是像引导4 .row,卡或NaV的Flexbox的容器内的元件。在flexbox元素中使用ml-auto
(margin-left:auto)将元素向右推。
答
从文档,你做这样:
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-push-6">content needs to be right aligned</div>
</div>
啊啊啊,我曾试图浮动的权利,但在山坳本身,有这样的混了。谢谢! – Thibs