Bootstrap col 右对齐

Posted 2023-03-05

【中文标题】Bootstrap col 右对齐

【英文标题】：Bootstrap col align right

【发布时间】：2017-07-15 12:04:15

【问题描述】：

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

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

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

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

【问题讨论】：

对于新版本的引导程序，我找到了这个工作快捷方式：getbootstrap.com/docs/4.0/utilities/flex/#direction

【参考方案1】：

引导程序 5（2021 年更新）

在 Bootstrap 5 中右对齐元素...

float-right 现在是 float-endtext-right 现在是 text-endml-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）中的元素，卡或导航。 ml-auto (margin-left:auto) 在 flexbox 元素中用于将元素推到右侧。

Bootstrap 4 align right examples

【参考方案2】：

这个怎么样？ 引导程序 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>

【讨论】：

救命恩人.. 谢谢:)

justify-content-end 只是救命。

【参考方案3】：

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

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

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/

【讨论】：

col-auto 看起来很奇怪，但这是在半天内多次尝试对非浮动按钮进行水平对齐但未成功后的第一件事 :)

我发现这对我的场景来说是更好的解决方案。

【参考方案4】：

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

<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

【讨论】：

@Guilherme ，bootstrap 4 标签是由其他人添加的（在我回答之后）。原来的问题只有 twitter-bootstrap 标签。

【参考方案5】：

对于 Bootstrap 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>