自舉列推/拉問題

Question

我以爲我明白pushing和pulling列的工作原理......但我想我錯了。我有以下jsfiddle，我創建了一個非常簡單的網格。它看起來像這樣同時xs：

保險人名稱

面值

性別

產品

，然後當我在sm，它看起來像這樣：

被保險人姓名|面額

性別|產品

到目前爲止我都很好。但是，當我到達md時，我需要「面數量」和「性別」字段來切換地點。正如你所看到的（從小提琴）我試圖push FaceAmount字段6列（我預計這個字段將被推下到下一行），然後性別字段6列（從而拉起了一排） 。

但是，如果您將小提琴拉出到md的視角...... FaceAmount列將向右推（而不是折下），並且性別字段將向左拉到您的位置甚至無法再看到它。

有什麼，我失蹤？我會預料到，因爲我推動FaceAmount字段通過了12列標記，它將包圍。同樣，我期望Gender字段被拉到前一行。

Answer 1

，我認爲你是對的說：

我推FaceAmount場通過12列標記

而且，你似乎明白使用push和pull。 jsfiddle中的問題是您試圖在兩個不同的行之間重新排列。例如，你可以把Insured Name和使用拉Face Amount：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 1 </div> 
     </div> 
     <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4"> 
      <div class="well"> 3 </div> 
     </div> 
     <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4"> 
      <div class="well"> 2 </div> 
     </div> 

     <div class="clearfix hidden-sm"></div> 

     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 4 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 5 </div> 
     </div> 
     <div class="col-sm-6 col-md-4"> 
      <div class="well"> 6 </div> 
     </div> 
    </div> 
</div> 

結果：

不過，雖然不同行之間做它不工作的方式。從this文章：

由於推動，並通過設置左或右財產，你注意到它永遠不會換到另一行拉的作品。

Here是一篇很好的文章，可以幫助你理解推拉是如何工作的。

Answer 2

這項工作！ http://jsfiddle.net/ujrwyrbr/68/

<div class="row"> 
          <div class="col-sm-6 col-md-12"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="row"> 
               <div class="col-xs-6"> 
                Insured Name: 
               </div> 
               <div class="col-xs-6"> 
                Some Name 
               </div> 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Face Amount: 
              </div> 
              <div class="col-xs-6"> 
               Some Amount 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
          <div class="col-md-12 col-sm-6"> 
           <div class="row"> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Gender: 
              </div> 
              <div class="col-xs-6"> 
               Male 
              </div> 
             </div> 
            </div> 
            <div class="col-md-6"> 
             <div class="row"> 
              <div class="col-xs-6"> 
               Product: 
              </div> 
              <div class="col-xs-6"> 
               Some Product 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 

Answer 3

你能得到這個工作，如果你可以使用md的col-md-3視和整個顯示4列。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Insured Name: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3 col-md-push-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Face Amount: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 


     <div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Gender: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-3"> 
      <div class="row"> 
       <div class="col-xs-6 trRight"> 
        Product: 
       </div> 
       <div class="col-xs-6 trLeft"> 
        x 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

別忘了，嵌套cols應該是裏面的另一個row。 http://www.codeply.com/go/AMAmnvznK6