118

我正在尝试用 2 个列创建一行。左边的一个列，其内容左对齐，第二个列的内容右对齐（旧拉右）。

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

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

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

5 回答 5

234

引导程序 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不工作，请记住Bootstrap 4 现在是 flexbox，并且许多元素display:flex可以阻止float-right工作。

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

Bootstrap 4 右对齐示例

于 2017-02-24T15:27:17.573 回答
49

这个怎么样？引导程序 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>
于 2019-02-18T13:50:46.177 回答
28

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

  • 右边的列正好占据了它需要的空间，并且会向右拉
  • 而左边的 col 总是获得最大的空间！

正是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>

检查这个小提琴https://jsfiddle.net/Julesezaar/tx08zveL/

于 2019-04-26T07:37:51.187 回答
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>

文档

于 2017-02-24T15:40:15.803 回答
1

对于引导程序 4+

这段代码对我很有效

<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>
于 2021-01-23T20:51:10.290 回答