右对齐 [英] col align right
问题描述
我正在尝试创建一个带有2个列的行.左边的一个col的内容向左对齐,第二个col的内容向右对齐(旧拉右).
我该如何在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
不起作用,请记住, Bootstrap 4现在是flexbox ,并且许多元素都是display:flex
,可以阻止float-right
工作./p>
在某些情况下,实用程序类(例如 align-self-end
或 ml-auto
)用于使Flexbox容器(如Bootstrap 4 .row)中的元素右对齐.卡或导航ml-auto
(margin-left:auto)用于flexbox元素中,以将元素向右推.
I'm trying to create a row with 2 cols. One col on the left with its contents aligned left, and the second col with its contents aligned right (old pull-right).
How to do I go about this in alpha-6?
I've tried a few things, but this is what I have so far. What am I missing?
<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
Use float-right
for block elements, or text-right
for inline elements:
<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
If float-right
is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex
which can prevent float-right
from working.
In some cases, the utility classes like align-self-end
or ml-auto
work to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. The ml-auto
(margin-left:auto) is used in a flexbox element to push elements to the right.
Bootstrap 4 align right examples
这篇关于右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!