19

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

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

在此处输入图像描述

在-md或-lg断点处，包含 div 堆叠 2 到一行：

在此处输入图像描述

这是当前代码 - 我知道如何在包含的 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和offseting以正确的顺序获得 A、B 和C。真的有可能吗？

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

4

4 回答 4

23

Bootstrap 4或Bootstrap 5的用户会希望看到这个问题： Bootstrap change order of columns

Bootstrap 3（原始答案）

我想你想看看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

于 2013-08-29T17:23:07.907 回答
1

任何不使用更传统方法的理由，即。将 B 向左浮动，其他元素向右浮动？

就像您将其添加到 jsfiddle 中的当前 CSS 一样：

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

见http://jsfiddle.net/E6BFk/

我不确定 Bootstrap 的列排序是否可以实现堆叠效果，也许只有重新排序......尽管该功能的文档非常少。

于 2013-08-29T15:59:05.657 回答
0

我尝试了推/拉，如 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/

于 2014-08-05T22:56:17.377 回答
0

@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 mdorlg将是：

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

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

于 2015-02-04T08:34:22.667 回答