İtme/çekme sınıfları bir ızgara sisteminde ne yapar? CSS ızgara sistemleri ve çerçevelerinin bir sürü baktığımızda

Question

genellikle yüzde genişliklerine sahip standart bir sütun ve satır kurulum var. Örneğin bu gibi:

standart ızgara kolon:

.col-10 { 
    width: 83.33333%; 
    width: calc(100%/12 * 10); 
    width: -webkit-calc(100%/12 * 10); 
    width: -moz-calc(100%/12 * 10); } 

Ancak, buna ek olarak, sık sık .push veya .pull gibi diğer sınıfları bkz.

itme/çekme sınıfları:: Böyle Örneğin

.push-10 { 
    left: 83.33333%; 
    left: calc(100%/12 * 10); 
    left: -webkit-calc(100%/12 * 10); 
    left: -moz-calc(100%/12 * 10); } 

.pull-10 { 
    left: -83.33333%; 
    left: calc(-100%/12 * 10); 
    left: -webkit-calc(-100%/12 * 10); 
    left: -moz-calc(-100%/12 * 10); } 

Ben biraz ızgara sistemleri kullanmak için geldim ama bu sınıfları kullanmak için gereken hiç. Muhtemelen ne yaptığını bilmiyorum çünkü. Öyleyse benim sorularım:

1. İtme sınıfı genellikle ne yapar?
2. Çekme sınıfı genellikle ne yapar?
3. zaman bunların her kullanmak isteyeyim?
4. Her birini nasıl kullanıyorsunuz?
5. göstermek için bir keman örnek teşkil eder.

Answer 1

Onlar içeriği yeniden düzenlenmesi için. İçeriğinizin ilk önce HTML işaretlemesinde ve sonra bir kenar çubuğunda gelmesini istediğinizi söyleyelim, ancak önce kenar çubuğunun önce ekranda (solda) ve ardından içeriğin ikinci olarak (sağda) gelmesini istiyorsunuz. Örneğin, Bootstrap kullanılması

:

<div class="row"> 
    <div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div> 
    <div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div> 
</div> 

col-sm-push-3 aracı% 25 sol (left: 25%) sütunu hareket eder.

col-sm-pull-9 aracı% 75 sağa doğru (right: 75%) sütunu hareket eder.

Yani bu senaryoda geniş sütun küçük sütunun genişliği 'itilir' olan ve küçük bir sütun büyük sütunun genişliği 'çekilir' edilmektedir. Böyle

Demo using Bootstrap

---

bir şey:

.push-10 { 
    left: calc(100%/12 * 10); 
} 

araçlar, kap (% 100) genişliğini almak ızgara sütun sayısı ile bölün (12) ve onu (10) tarafından itmek istediğiniz sayı ile çarpın. 83.33333333% ile ayrılıyor.