Bootstrap 4浮在右边.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,它工作正常,但我想使用该行.我错过了什么吗？

谢谢 :)

Answer 1

Bootstrap 4已将Flexbox用于其布局.您可以通过将"justify-content-end"类添加到父容器来获得所需的结果.

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

如果您想学习Flexbox的基础知识,我建议您查看这个快速有趣的教程:http://flexboxfroggy.com/ .这是一个很棒的系统,但Legacy IE(IE 9及更早版本)不支持它.

Answer 2

row是bootstrap-4中的flex容器，用于在flex容器中对齐您需要使用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。

还有一个工具“ 证明内容”可更改flex容器中项目的对齐方式。

Answer 3

站在引导文档中，您应该ml-auto在要放置在右侧的列上使用class。

这样（看例子）你只能在右边有你想要的项目，而所有其他列仍然会自然流动（在左边）。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-3 border border-primary">
      One 
    </div>
    <div class="col-3 border border-primary">
      Two
    </div>
    <div class="col-3 border border-success ml-auto">
      Three
    </div>
  </div>
</div>

Answer 4

如果您只想将列“拉”到右侧，则可以使用“偏移”。既然用了col-md-8，就添加offset-md-4。

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

  </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">