Bootstrap col 右对齐 [英] Bootstrap col align right
问题描述
我正在尝试用 2 列创建一行.左边的一个 col 内容左对齐,第二个 col 内容右对齐(旧的 pull-right).
如何在 alpha-6 中处理这个问题?
我已经尝试了一些东西,但这是我目前所拥有的.我错过了什么?
<div class="col">left</div><div class="col ml-auto">内容需要右对齐</div>
Bootstrap 5(2021 年更新)
在 Bootstrap 5 中右对齐元素...
float-right
现在是 float-end
text-right
现在是 text-end
ml-auto
现在是 ms-auto
引导程序 4(原始答案)
对块元素使用 float-right
,对内联元素使用 text-right
:
<div class="col">left</div><div class="col text-right">内联内容需要右对齐</div><div class="row"><div class="col">left</div><div class="col"><div class="float-right">元素需要右对齐</div>
http://codeply.com/go/oPTBdCw1JV
如果 float-right
不起作用,记住 Bootstrap 4 现在是 flexbox,许多元素是 display:flex
可以阻止 float-right
工作.
在某些情况下,诸如 align-self-end
或 ml-auto
之类的实用程序类可用于右对齐 flexbox 容器内的元素,如 Bootstrap 4 .row、Card 或 Nav.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>
Bootstrap 5 (update 2021)
To right align elements in Bootstrap 5...
float-right
is now float-end
text-right
is now text-end
ml-auto
is now ms-auto
Bootstrap 4 (original answer)
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://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
这篇关于Bootstrap col 右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!