Question

我正在使用Bootstrap的float-left和float-right类。我的问题是这些浮动内容后出现的内容。它无法识别上面有内容。如何获得新的div堆叠在下面？

* {
  outline: 1px red solid;
  }

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="float-left">
  Div left
</div>
<div class="float-right">
  Div right
</div>

<div>
  New div
</div>

Answer 1

您尝试这样做吗？

* {
  outline: 1px red solid;
  }

.newdiv{
   display:block;
}

.cols{
   width:100%;     
}

.myrow{
   display:flex;
   margin-right: 0px !important;
   margin-left: 0px !important;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="myrow">
  <div class="cols">
    <div class="float-left">
      Div left
    </div>
    <div class="float-right">
      Div right
    </div>
  </div>

</div>

<div class="newdiv">
  New div
</div>

Answer 2

在这种情况下，如果没有理由将浮动元素包装到bootstraps网格类row和col中，则需要将它们包装到bootstraps助手类clearfix

* {
  outline: 1px red solid;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div class="clearfix">
  <div class="float-left">
    Div left
  </div>
  <div class="float-right">
    Div right
  </div>
</div>

<div>
  New div
</div>

使用Bootstrap在浮动div之后堆叠内容

2 个答案: