Bootstrap col 右对齐

Question

我正在尝试创建包含 2 列的行。左侧的一列内容左对齐，第二列内容右对齐（旧的右拉）。

如何在 alpha-6 中解决这个问题？

我已经尝试了一些东西，但这是我目前所做的。我错过了什么？

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

Answer 1

Bootstrap 5（2021 年更新）

右对齐 Bootstrap 5...

中的元素

float-right 现在是 float-end
text-right 现在是 text-end
ml-auto 现在是 ms-auto

Bootstrap 4（原答案）

对块元素使用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://codeply.com/go/oPTBdCw1JV

如果float-right不行，记得Bootstrap4现在是flexbox，还有很多元素display:flex 可以阻止 float-right 工作。

在某些情况下，类实用程序 align-self-end 或 ml-auto 可以用于右对齐 flexbox 容器内的元素，例如 Bootstrap 4 .row、Card 或 Nav。 ml-auto (margin-left:auto) 在 flexbox 元素中用于将元素推到右边。

Bootstrap 4 align right examples

Answer 2

根据文档，您可以这样做：

<div class="row">
    <div class="col-md-6">left</div>
    <div class="col-md-push-6">content needs to be right aligned</div>
</div>

Docs

Answer 3

这个怎么样？ Bootstrap 4

<div class="row justify-content-end">
    <div class="col-3">
        The content is positioned as if there was
        "col-9" classed div appending this one.
    </div>
</div>

Answer 4

对于 Bootstrap 4 我发现以下内容非常方便，因为：

右侧的列正好采用它需要的 space 并将向右拉
而左列总是获得最大数量 space!。

它是 col 和 col-auto 的组合，它有神奇的作用。所以你不必定义 col 宽度（如 col-2，...）

<div class="row">
    <div class="col">Left</div>
    <div class="col-auto">Right</div>
</div>

非常适合将文字、图标、按钮...右对齐。

在小型设备上进行响应的示例：

<div class="row">
    <div class="col">Left</div>
    <div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>

勾选这个Fiddlehttps://jsfiddle.net/Julesezaar/tx08zveL/

Answer 5

对于Bootstrap4+

这段代码对我来说效果很好

<div class="row">
        <div class="col">
            <div class="ml-auto">
                this content will be in the Right
            </div>
        </div>
        <div class="col mr-auto">
            <div class="mr-auto">
                this content will be in the leftt
            </div>
        </div>
    </div>

Bootstrap col 右对齐

Bootstrap col align right

twitter-bootstrap

bootstrap-4

bootstrap-5