html - "Pull center"in Bootstrap : A -D- B -E- C columns collapsing to A-B-C//D-E, 如何在D和E之间获取B？

Question

我不要求在 bootstrap 中对列进行简单的居中对齐。这很容易而且has been covered already ，这些解决方案不适用于我在这里尝试做的事情。

---

我想要的是在宽屏设备上有五列的布局，2 - 3 - 2 - 3 - 2， 折叠成三个 2 列 4 - 4 - 4，然后是两个 3 列 6 - 6。

像这样:

  <div class="row">
    <div class="col-xs-4 col-md-2 pull-left">
    A
    </div>

    <div class="col-xs-4 col-md-2 pull-center">
    <!-- of course, pull-center doesn't exist, it's here to illustrate intention -->
    B
    </div>

    <div class="col-xs-4 col-md-2 pull-right">
    C
    </div>

    <div class="col-xs-6 col-md-3"> 
    D
    </div>

    <div class="col-xs-6 col-md-3"> 
    E
    </div>
  </div>

如果 pull-center 存在并且 float: middle 存在，在宽设备上看起来像这样:

 A- _D_ B- _E_ C-

...在窄设备上像这样:

 -A-- -B-- -C--
 __D___ __E___ 

...但是，因为没有 pull-center 或 float: middle; 这样的东西，目前看起来像这样:

 A- B- _D_ _E_ C-

如何让我的 B 列在 HTML 中 float 在它下面的两列之间？我已经尝试将各种 pull- 类和 float CSS 添加到 D 和 E 列，但找不到任何有用的东西。

Answer 1

我想这是你想要的:

<div class="row">
    <div class="col-xs-4 col-md-2">
    A
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-3">
    B
    </div>
    <div class="col-xs-4 col-md-2 col-md-push-6">
    C
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-4">
    D
    </div>
    <div class="col-xs-6 col-md-3 col-md-pull-2">
    E
    </div>
</div>

我使用 Bootstrap column ordering .

它可以很容易地改变响应列的顺序。

希望对您有所帮助。

解释:

(原始顺序)

(新订单)

推-*(向右移动*步)

拉-*(向左移动*步)

B => 从 (3) 到 (6) => 推 3 步

C => 从 (5) 到 (11) => 推 6 步

D => 从 (7) 到 (3) => 拉 4 步

E => 从 (10) 到 (8) => 拉 2 步