Question

我正在使用Twitter Bootstrap v3，并希望使用column ordering和offsetting响应地重新排序元素。

这就是我想要使用我的元素的方式。在-xs或-sm个断点处，将包含div的行堆叠为4行：

enter image description here

在-md或-lg个断点处，包含div的行堆叠为2行：

enter image description here

这是当前代码 - 我知道如何在包含div上设置类，但不知道如何在A，B和C上设置类：

  <div class="row">
    <div class="containing col-xs-6 col-sm-6 col-md-3 col-lg-3">
      <div class="row">
       <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of A</div>
       <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of B</div>
       <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6">Content of C</div>
      </div>
    </div>
    ... more containing divs...
  </div>

我无法弄清楚如何使用Bootstrap 3的column ordering和offsetting以正确的顺序获得A，B和C.它真的可能吗？

就我使用JSFiddle而言：http://jsfiddle.net/3vYgR/

Answer 1

我想您要查看push和pull类...

<div class="row">
   <div class="a col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
   <div class="b col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
   <div class="c col-xs-12 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
</div>

演示：http://bootply.com/77853

Answer 2

任何理由不在此使用更传统的方法，即浮动B离开，其他元素向右移动？

就像你在jsfiddle中将它添加到当前的CSS中一样：

.b {
    float: left;
    width: 50%;
    height: 100px;
}
.a, .c {
    float: right;
    width: 50%;   
    height: 50px;
}

请参阅http://jsfiddle.net/E6BFk/

我不确定Bootstrap的列排序是否可以实现堆叠效果，可能只是重新排序...虽然该功能的文档非常简洁。

Answer 3

我按照Skelly的回答尝试了推/拉，但是一旦应用了高度，C就会在新行中结束：http://www.bootply.com/Q3djHYawgb#

如果以小尺寸显示B可以首先显示，那么我认为在右侧列中创建一行以包含A和C更有意义：

<div class="containing row">
    <div class="b col-xs-12 col-md-6">Content of B</div>
    <div class="ac col-xs-12 col-md-6">
        <div class="row">
            <div class="a col-xs-12">Content of A</div>
        </div>
        <div class="row">
            <div class="c col-xs-12">Content of C</div>
        </div>
    </div>
</div>

请参阅http://jsfiddle.net/hoodoo99/L2BE9/

Answer 4

@skelly提供的答案是很好的起点，但确实会导致一些垂直对齐问题。想象一下 A 是一个高 div，然后 C 在A。下面垂直对齐：

[A] [B]
[ ]
    [C]

此外，如果您想更进一步，您可能还需要考虑使用clearfix块。例如;

<!-- Add clearfix for only the required viewport(s) -->
<div class="clearfix visible-md-block visible-lg-block"></div>

不clearfix md或lg可能最终为：

[A] [B]
    [C] [D]

如果您想在最后的“列”中使用2个以上的元素，或者元素的高度开始使其他元素不对齐，这一点尤为重要。

clearfix md或lg将是：

[A] [B]
    [C]
    [D]

示例小提琴：http://jsfiddle.net/L5174o8d/

使用Twitter Bootstrap响应性地重新排序div？

4 个答案: