Bootstrap 3 - 具有3列响应布局的奇怪浮动问题

Question

我在bootstrap 3中遇到了三列布局的问题。

在完整桌面视图中，我有一个标准的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>

Answer 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-2 col-lg-2"></div><!--full with on responsive view-->
</div>