Bootstrap 拉取和推送是如何工作的答案

【问题标题】：How does Bootstrap Pull and push workBootstrap 拉取和推送是如何工作的
【发布时间】：2016-12-06 02:13:37
【问题描述】：

我正在尝试修复一个没有像插图那样引导的页面。但我的col-2、col-3、col-4 与第 1 列和第 2 列不一致。我无法真正理解拉和推是如何工作的。我已经在我的移动布局上工作过，它看起来不错，但是当它进入桌面时，它会弄乱布局。

当我把它变成桌面时，我的布局变成了这个。其下的标题和列未对齐。

【问题讨论】：

你能提供一个工作代码示例吗？
@JohannKratzik 代码真的很糟糕。还有很多java的东西，所以就像白白地剥光一样。如果我能理解 pull 和 pull 在我的情况下是如何工作的，我宁愿编写一些新的东西。

标签： css twitter-bootstrap

【解决方案1】：

您需要在row 中包含黄色的 div-s，这样它们就不会跳过下一行。

.left-box {
    height: 290px;
    width: 100%;
    background: #e66;
    margin: 3px;
}

.right-box {
    height: 70px;
    background: #ee6;
    margin: 3px;
}

@media screen and (min-width: 992px) {
    .left-box, .right-box {
       height: 200px;
    }    
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-2 col-xs-5">
            <div class="left-box"></div>
        </div>
        <div class="col-md-10 col-xs-7">
          <div class="row">
            <div class="col-md-3"><div class="right-box"></div></div>
            <div class="col-md-3"><div class="right-box"></div></div>
            <div class="col-md-3"><div class="right-box"></div></div>
            <div class="col-md-3"><div class="right-box"></div></div>
          </div>
        </div>
    </div>
</div>

注意：根据引导规则，声明class="col-md-2 col-sm-5" 与class="col-lg-2 col-md-2 col-sm-5 col-xs-12" 相同。

【讨论】：

谢谢，但我不明白为什么我们需要一个 .row 两次，不应该是一次吗？据我了解，像水平块一样排成一行。

【解决方案2】：

我认为实际上你不需要推拉课程。你可以使用这样的标记：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="left-box"></div>
        </div>
        <div class="col-md-6">
            <div class="right-box"></div>
            <div class="right-box"></div>
            <div class="right-box">etc...</div>
        </div>
    </div>
</div>

笔：http://codepen.io/anon/pen/yVKgwG

【讨论】：

这是一个桌面屏幕，我需要移动设备的布局和桌面的 col。
您只谈论“移动”和“桌面”，但如果您使用 -md- 或 -sm- 类或其他什么，则不会。而且你说你不可能贴出代码sn-p。