Bootstrap在行尾创建一个元素

Question

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

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

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

Answer 1

由于Bootstrap 4使用flexbox或display: flex在row类上，因此您只能ml-auto在第二个div上使用，这将添加margin-leftauto并将该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>

Answer 2

这是来自 Bootstrap 文档。默认情况下，每列都是aligned/ floatedleft，但是这样列之间的空间是均匀分布的：

<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 文档 - 网格

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