"हर समय क्षैतिज" का क्या अर्थ है?

Question

नए बूटस्ट्रैप तीन दस्तावेज explains the grid behaviour अतिरिक्त छोटे उपकरणों के लिए "हर समय क्षैतिज" के रूप में। इसका क्या मतलब है? निश्चित रूप से एक छोटे से डिवाइस पर सभी कॉलम एक दूसरे पर लंबवत ढेर होंगे? मुझे यहां क्या असफल रहा है मेरी गड़बड़ी की समझ (कमी) है।

मैं एक गैर-डिजाइनर परिप्रेक्ष्य से आ रहा हूं, और एक प्रतिक्रियाशील ग्रिड में कई उत्पादों को फिर से चलाने की कोशिश कर रहा हूं। प्रत्येक पंक्ति के भीतर कॉलम की संख्या इस बात पर निर्भर करेगी कि उत्पादों की एक विषम या यहां तक ​​कि संख्याओं को प्रदर्शित किया जा रहा है या नहीं। < - बूटस्ट्रैप, और समान रूप से गतिशील पृष्ठों पर स्थिर सामग्री के साथ सरल लगता है। उदाहरण के लिए, क्या हमें इसे 1212 तक बनाने के लिए खाली <div class="col-xs*"></div> डालना चाहिए?

Answer 1

क्या "हर समय क्षैतिज" का अर्थ यह है कि कोई ब्रेकपॉइंट नहीं है जिस पर कॉल-एक्सएस * * स्टैक्ड किए जाने से बदल जाएगा। उदाहरण के लिए:

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

इस उदाहरण में, वहाँ हमेशा बराबर आकार के दो स्तंभों हो जाएगा, चाहे आप एक फोन, टेबलेट, या डेस्कटॉप पर कर रहे हैं। इसके विपरीत के लिए:

<div class="col-sm-6"></div> 
<div class="col-sm-6"></div> 

इस उदाहरण में, स्तंभ जब तक कि डिवाइस के व्यूपोर्ट> = 768 है एकत्र हो जाएंगे, जो उस समय बराबर आकार के दो स्तंभों में बदल जाएगी।

प्रश्न आप खुद से पूछ सकते हैं कि "इन सभी बदलावों का क्यों?" खैर, ये विकल्प हमें क्या देते हैं, सीएसएस में हमारे हाथ गंदे होने के बिना विभिन्न उपकरणों पर लेआउट को अनुकूलित करने की क्षमता है। उदाहरण के लिए, अगर मैं एक फोन पर दो बराबर स्तंभों, लेकिन टेबलेट पर एक 75/25 विभाजन चाहती थी और ऊपर, मैं क्या करना होगा निम्नलिखित:

<div class="col-xs-6 col-sm-8"></div> 
<div class="col-xs-6 col-sm-4"></div> 

आप, टेबलेट पर बराबर 75 फोन पर खड़ी करना चाहते थे, तो और/25 डेस्कटॉप पर है, तो इस कार्य करें:

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

क्योंकि आप स्पष्ट रूप से फोन के लिए एक ग्रिड निर्दिष्ट नहीं कर रहे हैं, यह खड़ी करने के लिए वापस जा रहा है।

ठोस महसूस करने के लिए, कुछ सरल ग्रिड एक साथ फेंक दें, और फिर अपने ब्राउज़र का आकार बदलना शुरू करें। आपको यह देखने में सक्षम होना चाहिए कि यह दस्तावेज़ों की तुलना में अधिक आसानी से कैसे बदलता है।

संपादित

एक अन्य उदाहरण है कि ब्याज की हो सकता है की सोचा: दोनों फोन और टैबलेट पर दो बराबर स्तंभों, तो 75/25 और डेस्कटॉप। कोड:

<div class="col-xs-6 col-md-8"></div> 
<div class="col-xs-6 col-md-4"></div> 

यह वास्तव में "हर समय क्षैतिज" का एक महान उदाहरण है। चूंकि हम एक कोल्-एसएम निर्दिष्ट नहीं कर रहे हैं, तब तक कॉल-एक्स जारी नहीं किया जाता है जब तक कि हम डेस्कटॉप ब्रेकपॉइंट को हिट नहीं करते हैं, जो> = 992 पर सेट होता है।