css - Bootstrap 3 - 3 列响应式布局的奇怪 float 问题

Question

我对 bootstrap 3 中的三列布局有疑问。

在完整桌面 View 中，我有一个标准的 3 列布局，但在响应式中，我将第 3 列放在下面并且全宽。

我遇到的问题是，响应式时，第 3 列变为 100% 高度并与上面的其他 2 列重叠。

请参阅下面的屏幕截图。

我在下面复制了一个简单的例子。

<div class="row">
  <div class="col-sm-2 col-lg-2"></div>
  <div class="col-sm-8 col-lg-8"></div>
  <div class="col-sm-12 col-lg-2"></div><!--full with on responsive view-->
</div>

这是 bootstrap3 的已知问题吗？还是我的标记有误？

桌面布局

响应式布局(蓝色列出现在绿色和红色上方)

干杯

Answer 1

再看一遍文档。答案是使用 clearfix 即。

<div class="row">
  <div class="col-sm-2 col-lg-2"></div>
  <div class="col-sm-8 col-lg-8"></div>
  <!--clearfix here-->  
  <div class="clearfix visible-sm"></div>
  <div class="col-sm-2 col-lg-2"></div><!--full with on responsive view-->
</div>