Bootstrap中的「Pull center」：A -D- B -E- C列收縮到A-B-C // D-E，如何在D和E之間獲得B？

Question

我是而不是要求在bootstrap中簡單對齊中心列。這很容易，has been covered already，這些解決方案不適用於我在這裏要做的。

---

我想要的，是一個佈局是在廣泛的設備5個柱，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之下的兩列之間浮動嗎？我已經嘗試將各種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步驟

Answer 2

代替使用浮動的，可以利用.col-*-push-*和.col-*-pull-*引導修飾符類可更改元素的位置。

你最終將與類似以下內容：

<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> 

見example。