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

【问题标题】：Bootstrap 3 - weird floating issue with 3 column responsive layoutBootstrap 3 - 3列响应式布局的奇怪浮动问题
【发布时间】：2013-09-19 14:49:38
【问题描述】：

我在 bootstrap 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 的已知问题吗？还是我的标记有误？

桌面布局

响应式布局（蓝色列出现在绿色和红色的顶部）

干杯

【问题讨论】：

你有自定义 CSS 覆盖 Bootstrap 吗？似乎只使用 Bootstrap 就可以按预期工作——bootply.com/81978
没有自定义 CSS。布局与我发布的代码一样简单。它不适用于我正在努力解决的问题..
对不起..我按错了输入..我的 col-sm 列加起来不等于 12，所以这就是问题所在。但。我不明白..我认为他们的全部目的是使这样的事情可以实现。我想我错过了什么

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这将使最后一列出现在前两列下方，这是我正在尝试做的，但我需要它在响应式 (col-12) 上是全宽的
12以下的任何列类都有'float-left'，所以上面都是向左浮动的，而底部不是，这就是问题所在。简单的解决方案是浮动左下角。我不想这样做，因为我好像在破解引导程序。我正在寻找更清洁的解决方案
在大屏幕上使用 col-xs-12，但你记得我们最多有 12 个柱状网格。因此，如果您添加 -12 这将覆盖同一行类中的其他人。所以尝试放入不同的行。
它们不能在不同的行，因为它们是 3 列，行总是 100% 宽度，所以它们会堆叠在一起