bootstrap列push / pull未按预期工作

Question

我想为小型，中型和大型屏幕尺寸设计以下设计::

对于超小屏幕，我希望它为：

这是我的代码：

＆＃13;

＆＃13;

.one {
  background-color: #00CCFF;
}
.two {
  background-color: #FFCCCC;
}
.three {
  background-color: #99CCFF;
}
.four {
  background-color: #CCFF33;
}
.five {
  background-color: #FF9900;
}
.six {
  background-color: #996666;
}
.mytab {
  height: 50px;
}
.abc {
  height: 100px;
  background-color: #090;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 col-sm-9 col-sm-push-3 abc">ABC</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-9">
    <div class="row">
      <div class="col-xs-4 col-sm-12 one mytab">1</div>
      <div class="col-xs-4 col-sm-12 two mytab">2</div>
      <div class="col-xs-4 col-sm-12 three mytab">3</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9 col-sm-push-3">
    <div class="row">
      <div class="col-xs-4 four mytab">4</div>
      <div class="col-xs-4 five mytab">5</div>
      <div class="col-xs-4 six mytab">6</div>
    </div>
  </div>
</div>
<!-- row -->

＆＃13;

＆＃13;

＆＃13;

以上代码仅为超小尺寸产生正确的布局。对于所有其他尺寸，我得到以下结果：

我不需要白色空间。推送/拉动可能会导致我做错了。任何建议/代码更改建议都会非常有用。

Answer 1

您不需要使用push和pull类来实现所需的输出。对CSS进行以下更改：

• 在 ABC div上，移除.col-sm-push-3并将.pull-right添加到float div right }
• 在包含 1 ， 2 和 3 的父div上，移除.col-sm-pull-9
• 在包含 4 ， 5 和 6 的父div上，移除.col-sm-push-3

＆＃13;

＆＃13;

.one {
  background-color: #00CCFF;
}
.two {
  background-color: #FFCCCC;
}
.three {
  background-color: #99CCFF;
}
.four {
  background-color: #CCFF33;
}
.five {
  background-color: #FF9900;
}
.six {
  background-color: #996666;
}
.mytab {
  height: 50px;
}
.abc {
  height: 100px;
  background-color: #090;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-xs-12 col-sm-9 pull-right abc">ABC</div>
  <div class="col-xs-12 col-sm-3">
    <div class="row">
      <div class="col-xs-4 col-sm-12 one mytab">1</div>
      <div class="col-xs-4 col-sm-12 two mytab">2</div>
      <div class="col-xs-4 col-sm-12 three mytab">3</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9">
    <div class="row">
      <div class="col-xs-4 four mytab">4</div>
      <div class="col-xs-4 five mytab">5</div>
      <div class="col-xs-4 six mytab">6</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

为什么会这样？

当有足够的空间让它们适合时，

左浮动元素应该彼此相邻堆叠。虽然看起来这应该在您的原始示例中发生，但它具有欺骗性，因为您已使用相对定位将框移动到所需位置。

实际上，包含 1 ， 2 和 3 的div实际上位于父div的右边缘1}}（它显示在左侧，因为它被left推送到25%）因此 4 没有空间， 5 和 6 div以适应，因此将其推送到新行。

Answer 2

你可以使用浮动黑客来占据上面的空间。新类.align-top添加了浮动属性。或者，内置pull-right类与我添加的新类具有相同的属性。最好使用它。

.one {
  background-color: #00CCFF;
}
.two {
  background-color: #FFCCCC;
}
.three {
  background-color: #99CCFF;
}
.four {
  background-color: #CCFF33;
}
.five {
  background-color: #FF9900;
}
.six {
  background-color: #996666;
}
.mytab {
  height: 50px;
}
.abc {
  height: 100px;
  background-color: #090;
}
/* Below class is equivalent to pull-right of Bootstrap builtin code */
.align-top {
  float: right !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-sm-9 col-sm-push-3 abc">ABC</div>
  <div class="col-xs-12 col-sm-3 col-sm-pull-9 align-top pull-right">
    <div class="row">
      <div class="col-xs-4 col-sm-12 one mytab">1</div>
      <div class="col-xs-4 col-sm-12 two mytab">2</div>
      <div class="col-xs-4 col-sm-12 three mytab">3</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9 col-sm-push-3">
    <div class="row">
      <div class="col-xs-4 four mytab">4</div>
      <div class="col-xs-4 five mytab">5</div>
      <div class="col-xs-4 six mytab">6</div>
    </div>
  </div>