拉/推中的引导故障答案

【问题标题】：Bootstrap glitch in pull / push拉/推中的引导故障
【发布时间】：2015-03-17 21:50:20
【问题描述】：

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

下面的 sn-p 几乎可以得到我想要的结果：

问题在于调整屏幕的大小，宽度约为 1200 像素，两个 aside 元素（蓝色和绿色）彼此相邻（您可以检查 sn-p）。

有什么帮助吗？

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>

【问题讨论】：

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

【解决方案1】：

这不是故障。你在混合尺寸。您的 push 和 pull 应该设置在与列声明相同的断点处。

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>

【讨论】：