css - Bootstrap Pull 和 Push 是如何工作的

Question

我正在尝试修复未像插图那样 Bootstrap 的页面。但是我的 col-2、col-3、col-4 与第 1 列和第 2 列不对齐。我真的无法理解拉动和插入工作。我已经在我的移动布局上工作，它看起来不错，但是当它进入桌面时，它弄乱了布局。

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

Answer 1

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

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

注意:根据 bootstrap 规则，声明 class="col-md-2 col-sm-5" 与 class="col-lg-2 col- md-2 col-sm-5 col-xs-12"。