拉/推中引导毛刺

Question

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

下面的代码段几乎可以获得我想要的结果：

问题是调整屏幕大小，大约1200px宽度，两个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

这不是故障。您正在调整大小。您的推送和拉动应设置在与列声明相同的断点处。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;