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

Posted 2023-03-06

【中文标题】使用 Twitter Bootstrap 响应式地重新排序 div？

【英文标题】：Reordering divs responsively with Twitter Bootstrap?

【发布时间】：2013-09-02 02:55:10

【问题描述】：

我正在使用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 和 offsetting 以正确的顺序获得 A、B 和 C。真的有可能吗？

这是我使用 JSFiddle 所获得的：http://jsfiddle.net/3vYgR/

【问题讨论】：

“4/2 堆叠成一行”是什么意思？你的意思是第一个版本是4个单位高，第二个是2个单位？或者你的意思是第一个版本可以在水平线上有 4 个 a-b-c 组，第二个可以有 2 个？

【参考方案1】：

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

【讨论】：

这正是我想要的，谢谢！对于任何阅读这里的人来说，都是推/拉文档的链接：getbootstrap.com/css/#grid-column-ordering 虽然我仍然不完全理解推拉的确切作用......

您只需要新的网格类，例如从 12 列变为 6 列。不需要 col-sm-* 或 col-lg-* 类，因为它们分别继承了 xs 和 md。

不要忘记，如果您的元素开始出现在意外位置，您可能还需要使用“clearfix”。

这个例子也给出了我的回答中列出的 [C] 的垂直对齐问题。

【参考方案2】：

@skelly 提供的答案是一个很好的起点，但确实会导致一些垂直对齐问题。假设 A 是一个 tall 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/

【讨论】：

有没有办法解决垂直对齐问题？我想要的是相反的，但我有同样的对齐问题。例如：jsfiddle.net/bqop535n

如果我对您的理解正确，那么您应该删除 clearfix 和 push/pulls，例如：jsfiddle.net/qkaL02z8

【参考方案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/

【讨论】：

当 XS 启动时，您的示例将 A 置于 B 之下。

【参考方案4】：

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

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

.b 
    float: left;
    width: 50%;
    height: 100px;

.a, .c 
    float: right;
    width: 50%;   
    height: 50px;

见http://jsfiddle.net/E6BFk/

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