網格系統下的push和offset有什麼區別？

Question

我想了解Bootstrap網格中push和offset的區別。例如，下面兩行之間的唯一區別是每行中的第三列。一個使用推，另一個使用偏移量。但是，他們都完全一樣。

<div class="row"> 
    <div class="col-md-2"> 
     <h2>Column 1</h2> 
     <p> 
      This is text for column 1 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-2"> 
     <h2>Column 2</h2> 
     <p>This is text for column 2</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-2 col-md-push-6"> 
     <h2>Column 3</h2> 
     <p>This is text for column 3</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-2"> 
     <h2>Column 1</h2> 
     <p> 
      This is text for column 1 
     </p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-2"> 
     <h2>Column 2</h2> 
     <p>This is text for column 2</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p> 
    </div> 
    <div class="col-md-2 col-md-offset-6"> 
     <h2>Column 3</h2> 
     <p>This is text for column 3</p> 
     <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p> 
    </div> 
</div> 

Answer 1

由於偏移使用margin-left，和推使用left：

• 偏移將迫使相鄰列移動
• 推（和拉）將重疊其他欄目

這裏有一個直觀例子：http://www.bootply.com/126557

在您的例子有沒有列「衝突」。由於相鄰列不受影響，推送和偏移顯示相同。

Answer 2

引導程序中的偏移量將偏移列的左側，從而將其移到右邊或「偏移」某些東西到右邊。使用「偏移」風格，您只能將項目偏移到右側。對於推拉，您可以將某些東西拉到「左邊或右邊」，或者您可以推拉拉的對面。推或拉項目主要用於列排序。

Answer 3

.col-md-offset-*：將增加左邊距由*類

.col-md-push-*/.col-md-pull-*：將*類更改網格列的顯示順序。拉將發送列向左，而推送發送到右側。

• Docs for offset
• Docs for push/pull