css - Bootstrap 列推/拉未按预期工作

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 将 div float 到右边
• 在包含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 实际上位于parent div(它出现在左边是因为它被25%推到了left)所以没有空间给 4、5 和 6 div 适合，因此它被推到一个新行。