Bootstrap 4 float-right inside .row

Question

我是 Bootstrap 4 的新手，似乎无法在连续工作的 col div 上正确浮动。这是我的代码：

 <div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>

</div>
</div>

奇怪的是，没有行作为父 div，它工作正常，但我想使用行。我错过了什么吗？

谢谢 ：）

原文由 Zazz Blammymatazz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

row 是 bootstrap-4 中的弹性容器，要对齐弹性容器中的内容，您需要使用 ml-auto 和 mr-auto 。

这是示例：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
  <div>
     Hello from left
  </div>
  <div class="ml-auto mr-3">
     Hello from right
  </div>
</div>

这是官方文档链接和示例： https ://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

对于不使用 flex 容器的情况，您可以使用 float-right 等同于以前版本中的 pull-right 。

还有一个实用程序 Justify Content 可以更改 flex 容器中项目的对齐方式。

原文由 Jainik 发布，翻译遵循 CC BY-SA 4.0 许可协议