Jaka jest różnica między systemem push i offset w systemie grid?

Question

Próbuję zrozumieć różnicę między push i offset w siatkach Bootstrap. Na przykład jedyną różnicą między dwoma rzędami poniżej jest trzecia kolumna w każdej. Jeden używa przycisku push, a drugi używa przesunięcia. Jednak oba są dokładnie takie same.

<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

Ponieważ przesunięcie wykorzystuje margin-left i Push używa left:

• przesunięcie zmusi sąsiednich kolumn przenieść
• Push (i ciągnąć) będzie się pokrywać inne kolumny

Oto wizualny przykład: http://www.bootply.com/126557

W przykładzie nie ma kolumnie „kolizji”. Push i offset wyglądają tak samo, ponieważ sąsiednie kolumny nie mają wpływu.

Answer 2

Przesunięcie w bootstrapie zrównoważy lewą stronę kolumny, przesuwając ją lub "przesuwając" coś w prawo. W stylu "offset" można przesuwać tylko elementy po prawej stronie. W przypadku pchnięć i ciągnięć można pociągnąć coś do "lewej lub prawej" lub można nacisnąć coś przeciwnego do pociągnięcia. Pchanie lub ciągnięcie przedmiotów jest podstawowym sposobem porządkowania kolumn.

Answer 3

.col-md-offset-*: wzrośnie lewy margines przez * klas

.col-md-push-*/.col-md-pull-*: będzie zmienić kolejność kolumn pojawiają grid przez * klas. Pull przesyła kolumnę w lewo, a push przesyła ją w prawo.

• Docs for offset
• Docs for push/pull