css - 拉/推中的 Bootstrap 故障

Question

从这个问题开始Three column Bootstrap layout with left sidebar at bottom我了解了 Bootstrap 列推拉。

下面的代码片段几乎可以得到我想要的结果:

问题是调整屏幕大小，在大约 1200 像素的宽度处，两个 aside 元素(蓝色和绿色)一个挨着另一个(您可以查看代码片段)。

有什么帮助吗？

div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<div class="container">
  <div class="content left col-md-7 col-lg-push-2"></div>
  <aside class="side1 left col-md-2 col-lg-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>

Answer 1

这不是故障。你在混合尺寸。您的推送和拉取应设置在与列声明相同的断点处。

div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

<div class="container">
  <div class="content left col-md-7 col-md-push-2"></div>
  <aside class="side1 left col-md-2 col-md-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>