बूटस्ट्रैप 3 में ग्रिड कक्षाओं (कोल-एसएम- # और कोल-एलजी- #) को समझना

Question

मैं बूटस्ट्रैप 3 पर शुरू हो रहा हूं और मुझे यह समझने में थोड़ी परेशानी हो रही है कि ग्रिड कक्षाओं का उपयोग कैसे किया जाए।

यहाँ मैंने अभी तक क्या सोचा है:

ऐसा प्रतीत होता है कि कक्षाएं col-sm-#और col-lg-#सादे पुराने से अलग हैं col-#वे केवल तभी लागू होंगे जब स्क्रीन एक निश्चित आकार (क्रमशः 768px और 992px) से ऊपर हो। यदि आप -sm- या -lg- को छोड़ते हैं, तो divs एक कॉलम में कभी नहीं गिरेंगे।

हालाँकि, जब मैं एक पंक्ति के अंदर दो divs बनाता हूँ जो दोनों हैं col-sm-6तो ऐसा लगता है कि वे केवल साइड में हैं जब खिड़की 768px और 992px चौड़ी है। दूसरे शब्दों में, अगर मैं विंडो को नीचे की तरफ से पूरी तरह से सिकोड़ता हूं और फिर धीरे-धीरे इसे चौड़ा करता हूं, तो लेआउट सिंगल कॉलम है, फिर दो कॉलम, फिर सिंगल कॉलम पर वापस ।

1. क्या यह इच्छित व्यवहार है?
2. अगर मुझे 768px से अधिक के लिए दो कॉलम चाहिए, तो क्या मुझे दोनों कक्षाएं लागू करनी चाहिए ? ( <div class="col-sm-6 col-lg-6">)
3. col-6 भी शामिल होना चाहिए ?<div class="col-6 col-sm-6 col-lg-6">

Comments

तालिका पढ़ें: getbootstrap.com/css/#grid # 1 - यह @mediaविशिष्ट व्यवहार है क्योंकि विशिष्ट आकारों के लिए उपयोग किया जाता है। # 2 और # 3 हाँ, पढ़ें 'उदाहरण: डेस्कटॉप के साथ मोबाइल का संयोजन' और 'उदाहरण: मोबाइल, टैबलेट और डेस्कटॉप'

— राफेलडीडीएल

@ राफेलडीडीएल धन्यवाद। मैंने इसे पोस्ट करने के कुछ समय बाद ही समझ लिया। मुझे लगता है कि मुझे v2 के "बूटस्ट्रैप-रेस्पोंसिबल.एक्स" जैसे व्यवहार की उम्मीद थी और ऐसा नहीं है।

— इमर्सोथिसिस

— इन्हें

Answer 1

[अद्यतन जारी]

मैंने डॉक्स पर एक और नज़र डाली और ऐसा प्रतीत होता है कि मैंने एक सेक्शन की अनदेखी की है जो इस बारे में विशेष रूप से बात करता है।

मेरे सवालों के जवाब:

1. हां, वे एक निश्चित चौड़ाई से ऊपर की चीजों के बजाय केवल विशिष्ट सीमाओं पर लागू होते हैं।

2. हां, कक्षाएं संयुक्त होने के लिए होती हैं।

3. ऐसा प्रतीत होता है कि यह कुछ मामलों में उचित है, लेकिन दूसरों के लिए नहीं है क्योंकि col- # कक्षाएं मूल रूप से col-xsm- # के बराबर हैं, या 0px से ऊपर की चौड़ाई (सभी चौड़ाई)।

डॉक्स को बहुत जल्दी पढ़ने के अलावा, मुझे लगता है कि मैं उलझन में था क्योंकि मैं बूटस्ट्रैप 3 में "बूटस्ट्रैप 2 मानसिकता" के साथ आया था। विशेष रूप से, मैं v2 और v3 में वैकल्पिक (वैकल्पिक) उत्तरदायी शैलियों (बूटस्ट्रैप-उत्तरदायी-css) का उपयोग कर रहा था (बेहतर IMO के लिए) काफी अलग है।

स्थिर रिलीज के लिए अद्यतन करें:

यह प्रश्न मूल रूप से आरसी 1 के आउट होने पर लिखा गया था। उन्होंने RC2 में कुछ बड़े बदलाव किए हैं ताकि कोई भी इसे पढ़ सके, न कि ऊपर बताई गई सभी चीजें अभी भी लागू होती हैं।

जब मैं वर्तमान में यह लिख रहा हूं, तब तक col-*-#कक्षाएँ ऊपर की ओर लगती हैं। उदाहरण के लिए, यदि आप चाहते हैं कि एक तत्व फोन के लिए 12 कॉलम (पूरी चौड़ाई) का हो, लेकिन टेबलेट और ऊपर के लिए दो 6 कॉलम (आधा पृष्ठ), तो आप ऐसा कुछ करेंगे:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(उन्होंने इस सवाल के लिखे जाने के बाद एक अतिरिक्त xs ब्रेक पॉइंट भी जोड़ा।)

Comments

हाइपरलिंक वर्तमान में किसी भी पृष्ठ पर इंगित नहीं करता है। मुझे यकीन नहीं है कि अगर उस लिंक को इंगित करने के लिए अपडेट किया जाना चाहिए जो @RaphaelDDL ने प्रदान किया है - getbootstrap.com/css/#grid - या किसी अन्य लिंक पर?

— जॉन श्नाइडर

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

— माइक पर्सेल

Answer 2

यहां आपके पास एक बहुत अच्छा ट्यूटोरियल है, जो बताता है कि बूटस्ट्रैप 3 में नए ग्रिड कक्षाओं का उपयोग कैसे करें।

इसमें मिक्सचर आदि भी शामिल हैं।

Comments

ब्लॉग लिंक में बूटस्ट्रैप 3 की ग्रिड के बारे में विस्तार से वर्णन किया गया है जिसमें 4 आकार वाले वर्ग जैसे कि कोल-एक्सएस- * शामिल हैं। अच्छा कोड उदाहरण है।

— कातो

यह बहुत अच्छा है, खासकर उसकी शैली आपको लगातार प्रोत्साहित करने के लिए प्रोत्साहित करती है; "उपयोगी सही? नहीं! नहीं पता? चलो चलते रहो!" उचित वाक्यों में चीजों को अच्छी तरह से समझाते हुए: "यह मूल रूप से कहता है" मुझे फ़ोन के आकार के नीचे 6 कॉलम चौड़ाई पर रखें, कभी भी मुझे स्टैक्ड मोबाइल लेआउट पर स्विच न करें। "" । पोस्ट करने के लिए धन्यवाद

— slugmandrew 11

Answer 3

"अगर मुझे 768px से अधिक के लिए दो कॉलम चाहिए, तो क्या मुझे दोनों कक्षाएं लागू करनी चाहिए?"

यह उतना ही सरल होना चाहिए:

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

जोड़ने की col-lg-6भी जरूरत नहीं ।

डेमो: http://www.bootply.com/73119

Comments

जिन कारणों से मैं अभी तक स्पष्ट नहीं कर सका, वह मेरे लिए इस तरह से काम नहीं कर रहे हैं। .col-sm-6केवल चौड़ाई की उस विशिष्ट श्रेणी पर लागू होता है (ऊपर सब कुछ नहीं)

— emersonthis

Answer 4

समझने का सबसे अच्छा तरीका बस ऊपर से नीचे तक सोचना है (बड़े डेस्कटॉप से ​​मोबाइल फ़ोन)

सबसे पहले, जैसा कि बी 3 मोबाइल है, इसलिए यदि आप xs का उपयोग करते हैं तो कॉलम बड़े डेस्कटॉप से ​​xs के समान होंगे (मैं xs या sm का उपयोग करने की सलाह देता हूं क्योंकि यह आपके स्क्रीन के आकार पर सब कुछ वैसा ही रखेगा जैसा आप चाहते हैं)

दूसरी बात यह है कि यदि आप विभिन्न उपकरणों या प्रस्तावों पर कॉलमों को अलग-अलग चौड़ाई देना चाहते हैं, तो जैसे आप कई वर्गों को जोड़ सकते हैं

ऊपर स्क्रीन रिज़ॉल्यूशन के अनुसार चौड़ाई बदल जाएगी, REMEMBER i। प्रत्येक कॉलम में कुल कॉलम = 12 रख रहा है

मुझे उम्मीद है कि मेरा जवाब मदद करेगा!

Answer 5

एसडीपी के उत्तर को संशोधित करने के लिए, आपको घोषणा करने की आवश्यकता नहीं col-xs-12है <div class="col-xs-12 col-sm-6">। बूटस्ट्रैप 3 मोबाइल-प्रथम है, इसलिए हर div कॉलम को डिफ़ॉल्ट रूप से 100% चौड़ाई का div माना जाता है - जिसका अर्थ है "xs" आकार में यह 100% चौड़ाई है, यह हमेशा उस व्यवहार के लिए डिफ़ॉल्ट होगा, चाहे आप जो भी सेट करें sm, md, lg। यदि आप चाहते हैं कि आपके xsकॉलम 100% न हों, तो आप सामान्य रूप से ए col-xs-(1-11)।

Answer 6

यह देर हो सकती है क्योंकि मुझे लगता है कि हम में से अधिकांश बीएस 4 का उपयोग कर रहे हैं। इस लेख में आपके द्वारा विस्तृत और सरल तरीके से पूछे गए सभी प्रश्नों को समझाया गया है, जिसमें कब क्या करना है। Bs4 या का उपयोग करने के लिए विस्तृत गाइडbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7

Comments

उत्तर के लिए प्रदान की गई जगह में अपने लिंक से संबंधित जानकारी डालने पर विचार करें।

— साओ

लिंक को शामिल करने का एकमात्र कारण यह था कि ऊपर से लेख पढ़ना शुरू करना मेरे लिए मददगार था। तभी यह समझ में आता है।

— AAA