html - Bootstrap 4 float-right inside .row

Question

我是 Bootstrap 4 的新手，似乎无法在一行内工作的 col div 上正确 float 。这是我的代码:

<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，它也能正常工作，但我想使用行。我错过了什么吗？

谢谢:)

Answer 1

row 是 bootstrap-4 中的 flex 容器，要对齐 flex-container 中的内容，您需要使用 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 更改弹性容器中项目的对齐方式。