右对齐

我正在尝试创建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无法工作。

在某些情况下，实用程序类喜欢align-self-end或ml-auto可以使Flexbox容器中的元素（如Bootstrap 4 .row，Card或Nav）右对齐。的ml-auto（利润率左：汽车）在Flexbox的元件用于推动元件到右侧。

Bootstrap 4对齐示例

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

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

从文档中，您可以执行以下操作：

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

文件