引导列推/拉未按预期工作

Question

我想对小、中、大屏幕尺寸进行如下设计：：

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

这是我的代码：

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

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

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

我不需要空格。推/拉可能有一些我做错了。任何建议/代码更改建议都会非常有帮助。

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

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

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

为什么会这样？

当有足够的空间容纳左浮动元素时，它们应该彼此相邻堆叠。虽然这似乎应该在您的原始示例中发生，但它具有欺骗性，因为您使用相对定位将框移动到所需位置。

实际上，包含1、2和3的div实际上位于父div的右边缘（它出现在左边是因为它被25%推到了left）所以没有空间放置4、5和6 div 适合，所以它被推到新的一行。

Answer 2

您可以使用浮动 hack 来占据上面的空间。新类 .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>