ग्रिड सिस्टम में पुश/पुल क्लास क्या करते हैं?

Question

जब मैं बहुत सी सीएसएस ग्रिड सिस्टम और ढांचे को देखता हूं तो उनके पास आमतौर पर मानक चौड़ाई और पंक्ति चौड़ाई के साथ पंक्ति सेटअप होता है। उदाहरण के लिए कुछ इस तरह:

मानक ग्रिड स्तंभ:

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

हालांकि, इस के अलावा, मैं अक्सर .push या .pull की तरह अन्य वर्गों में देखते हैं।

धक्का/खींच कक्षाएं: इस तरह उदाहरण के लिए

.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); } 

मैं ग्रिड सिस्टम काफ़ी उपयोग करने के लिए आए हैं, लेकिन मैं इन कक्षाओं का उपयोग करने के लिए आवश्यक नहीं किया है। शायद क्योंकि मुझे नहीं पता कि वे क्या करते हैं। तो मेरे प्रश्न हैं:

1. आमतौर पर पुश क्लास क्या करता है?
2. आमतौर पर पुल क्लास क्या करता है?
3. आप उनमें से प्रत्येक का उपयोग कब करना चाहते हैं?
4. आप उनमें से प्रत्येक का उपयोग कैसे करते हैं?
5. प्रदर्शित करने के लिए एक बेवकूफ उदाहरण प्रदान करें।

Answer 1

वे फिर से सामग्री के लिए हैं। आइए कहें कि आप चाहते हैं कि आपकी सामग्री एचटीएमएल मार्कअप में पहले आ जाए और उसके बाद एक साइडबार दूसरा हो, लेकिन आप चाहते हैं कि साइडबार डिस्प्ले (बाईं ओर) में पहले आ जाए और फिर सामग्री दूसरी (दाईं ओर) आती है।

एक उदाहरण के रूप बूटस्ट्रैप का उपयोग करना:

<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 साधन बाएं (left: 25%) से 25% स्तंभ ले जाएँ।

col-sm-pull-9 का मतलब कॉलम को दाईं ओर से 75% (right: 75%) पर ले जाएं।

इसलिए इस परिदृश्य में बड़े कॉलम को छोटे कॉलम की चौड़ाई 'धक्का' दिया जा रहा है, और छोटे कॉलम को बड़े कॉलम की चौड़ाई 'खींचा जा रहा है'।

Demo using Bootstrap

---

कुछ इस तरह:

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

मतलब, कंटेनर (100%) की चौड़ाई ले, ग्रिड में स्तंभों की संख्या से विभाजित (12) और इसे उस नंबर से एकाधिक करें जिसे आप इसे धक्का देना चाहते हैं (10)। 83.33333333% के साथ आपको छोड़कर।