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

Question

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

在全桌面视图中，我有一个标准的 3 col 布局，但在响应式上，我将第 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>