Bootstrap 在行尾创建一个元素答案

【问题标题】：Bootstrap make an element at the end of the rowBootstrap 在行尾创建一个元素
【发布时间】：2018-07-29 15:01:04
【问题描述】：

我正在使用 Bootstrap 框架，需要在行尾创建一个元素。

<div class="row">
    <div>div 1</div>
    <div>div end</div>
</div>

这些 div 是连续的 - 这是需要的。但我需要将“end div”元素拉到行的右上角。我尝试了许多 Bootstrap 类。但在某种程度上它们保持相邻。

【问题讨论】：

你试过在 div 1 上向左拉吗？
来自文档In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
可能重复：stackoverflow.com/questions/45494882/…

标签： css bootstrap-4

【解决方案1】：

由于 Bootstrap 4 在 row 类上使用 flexbox 或 display: flex，您可以在第二个 div 上使用 ml-auto，这将添加 margin-left auto 并将该 div 推到右侧。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div>div 1</div>
    <div class="ml-auto">div end</div>
  </div>
</div>

【讨论】：

【解决方案2】：

这是来自 Bootstrap 文档。默认情况下，每列左侧是aligned/floated，但这样一来，列之间的空间是平均分布的：

<div class="row justify-content-between">
    <div class="col-4">
        <div> Div 1 </div>
    </div>
    <div class="col-4">
        <div> Div End </div>
    </div>
</div>

它利用了flexbox，还有更多选项可用于在一行内对齐列，甚至是wrap 和nest。

通过此链接了解它：Bootstrap docs - Grid

对于 Bootstrap 4，还有另一个选项。因为它使用了flexbox，所以您可以在row 中将.ml-auto 添加到最后一个div，但您应该警惕整体row width（不应超过12/12 列宽度）。您可以在 Layout/Grid 部分的 Bootstrap 4 文档中阅读有关它的任何内容。

【讨论】：

唯一尊重 Boostrap 规则的好答案！添加容器，它将是完美的；）
啊，好吧......我应该更加警惕提供的代码......我确实有重写它的习惯，就像我一开始就写它一样！ ;)

【解决方案3】：

试试这个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
<div class="">
    <div class="float-left">div 1</div>
    <div class="float-right">div end</div>
</div>
</div>

【讨论】：