संख्या का अर्थ "col-md-4", "col-xs-1", "col-lg-2" बूटस्ट्रैप में

Question

मैं नए बूटस्ट्रैप में ग्रिड प्रणाली के साथ भ्रमित हूं, विशेष रूप से इन वर्गों:

col-lg-*
col-md-*
col-xs-*

(जहाँ * कुछ संख्या का प्रतिनिधित्व करता है)।

क्या कोई कृपया निम्नलिखित की व्याख्या कर सकता है:

1. वह संख्या ग्रिड को कैसे संरेखित कर रही है?
2. इन नंबरों का उपयोग कैसे करें ?
3. वे वास्तव में क्या प्रतिनिधित्व करते हैं?

Comments

आपको यहां एक स्पष्टीकरण मिलेगा । आप अपने इच्छित कॉलम में संख्या का उपयोग कर सकते हैं, लेकिन सुनिश्चित करें कि एक ही पंक्ति में सभी स्तंभों की संख्या का योग 12 के बराबर होना चाहिए

— Doan Cuong

Answer 1

केवल बूटस्ट्रैप 3 पर लागू होता है।

अभी के लिए अक्षरों (x s , sm , md , lg ) को अनदेखा करना , मैं सिर्फ अंकों के साथ शुरू करूँगा ...

• संख्या (1-12) किसी भी div की कुल चौड़ाई के एक हिस्से का प्रतिनिधित्व करती है
• सभी divs को 12 कॉलम में विभाजित किया गया है
• इसलिए, col-*-66 में से 12 कॉलम (आधी चौड़ाई), col-*-1212 के 12 कॉलम (पूरी चौड़ाई), आदि

इसलिए, यदि आप एक div स्पैन करने के लिए दो बराबर कॉलम चाहते हैं, तो लिखें

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

या, यदि आप चाहते हैं कि एक ही चौड़ाई में तीन असमान स्तंभ हों, तो आप लिख सकते हैं:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

आप हमेशा 12 तक जोड़ते हुए कॉलम के # को नोटिस करेंगे। यह बारह से कम हो सकता है, लेकिन 12 से अधिक होने पर सावधान रहें, क्योंकि आपकी अपकमिंग डिव्स अगली पंक्ति में नीचे आएगी (नहीं .row, जो पूरी तरह से एक और कहानी है)।

आप स्तंभों के भीतर भी घोंसले बना सकते हैं , ( .rowउनके चारों ओर एक आवरण के साथ सबसे अच्छा ) जैसे:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

नेस्टेड डिव का प्रत्येक सेट उनके पैरेंट डिव के 12 कॉलम तक फैला होता है। नोट: चूंकि प्रत्येक .colवर्ग में दोनों ओर 15px पैडिंग होती है, इसलिए आपको आमतौर पर नेस्टेड कॉलम को लपेटना चाहिए .row, जिसमें -15px मार्जिन होता है। यह पेडिंग को डुप्लिकेट करने से बचता है और नेस्टेड और नॉन-नेस्टेड कॉल वर्गों के बीच सामग्री को पंक्तिबद्ध रखता है।

- आपने विशेष रूप से xs, sm, md, lgउपयोग के बारे में नहीं पूछा , लेकिन वे हाथ से चलते हैं, इसलिए मैं मदद नहीं कर सकता, लेकिन इसे छू सकता हूं ...

संक्षेप में, उन्हें यह परिभाषित करने के लिए उपयोग किया जाता है कि किस स्क्रीन का आकार उस वर्ग पर लागू होना चाहिए:

• xs = अतिरिक्त छोटी स्क्रीन (मोबाइल फोन)
• sm = छोटी स्क्रीन (गोलियाँ)
• md = मध्यम स्क्रीन (कुछ डेस्कटॉप)
• lg = बड़ी स्क्रीन (शेष डेस्कटॉप)

अधिक विवरण के लिए आधिकारिक बूटस्ट्रैप प्रलेखन से " ग्रिड विकल्प " अध्याय पढ़ें ।

आपको आमतौर पर कई कॉलम कक्षाओं का उपयोग करके एक div को वर्गीकृत करना चाहिए ताकि यह स्क्रीन के आकार के आधार पर अलग-अलग व्यवहार करे (यह बूटस्ट्रैप को उत्तरदायी बनाता है)। जैसे: कक्षाओं के साथ एक div col-xs-6और col-sm-4मोबाइल फोन (xs) पर आधी स्क्रीन और टैबलेट (sm) पर स्क्रीन का 1/3 भाग होगा।

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

नोट: नीचे टिप्पणी के अनुसार, किसी दिए गए स्क्रीन आकार के लिए ग्रिड वर्गों है कि स्क्रीन आकार के लिए लागू होते हैं और बड़े जब तक एक और घोषणा ओवरराइड यह (यानी col-xs-6 col-md-4फैला पर 6 स्तंभों xs औरsm , और 4 कॉलम md औरlg , भले ही smऔर lgस्पष्ट रूप से घोषित नहीं किया गया)

नोट: यदि आप परिभाषित नहीं करते xs, यह लागू हो जाएगी col-xs-12(यानी col-sm-6पर आधी चौड़ाई है sm, mdऔर lgपर स्क्रीन है, लेकिन पूर्ण-चौड़ाई xsस्क्रीन)।

ध्यान दें: यह वास्तव में पूरी तरह से ठीक है अगर आपके .row12 से अधिक कॉल शामिल हैं, जब तक आप जानते हैं कि वे कैसे प्रतिक्रिया करेंगे। - यह एक विवादास्पद मुद्दा है, और हर कोई इससे सहमत नहीं है।

Comments

यह भी ध्यान देने योग्य है कि किसी दिए गए स्क्रीन आकार के लिए ग्रिड कक्षाएं उस आकार और बड़े स्क्रीन पर लागू होती हैं , जब तक कि आगे की अनुमति न हो। उदाहरण के लिए, .col-xs-2.col-sm-2.col-lg-7के बराबर है। col-xs-2.col-lg-7

— cvrebert

घोंसले के शिकार के संबंध में आपको अपने उदाहरण में सुधार करने की आवश्यकता है। नेस्टिंग को स्तंभ में सम्मिलित करने के लिए एक पंक्ति की आवश्यकता होती है जिसे आप अन्य स्तंभों के अंदर घोंसले में डाल रहे हैं। एक पंक्ति नहीं जोड़ने से आपको दोहरी पैडिंग हो जाएगी। इसे बेहतर तरीके से समझने के लिए, मेरे उत्तर में चित्र यहाँ देखें: stackoverflow.com/questions/23899715/…

— jme11

बहुत अच्छी व्याख्या, धन्यवाद। मैं लपेटकर के बारे में थोड़ा प्यार .colsमें .rowसे बचने के लिए और गद्दी cacel। मैं हमेशा सोचता था कि पंक्ति का उपयोग क्यों करें और इससे क्या फर्क पड़ता है।

— ऋषिराज पुरोहित

लेकिन प्रलेखन में ऐसा लगता है कि div की कुल चौड़ाई 12 से अधिक है, 'xs' के लिए 18 तक। कृपया 'मिश्रित: मोबाइल और डेस्कटॉप' अनुभाग पर एक नज़र डालें और ऐसा क्यों? getbootstrap.com/docs/3.3/examples/grid

— मिशेल

@ मिचेल ऐसा लगता है कि आप उनके प्रलेखन को गलत समझ रहे हैं। वे वहां दो अलग xs विकल्प दिखा रहे हैं - एक 12 कॉलम (पूरी चौड़ाई) के लिए और दूसरा 6 कॉलम (आधी-चौड़ाई) के लिए। आप देखेंगे कि वे कॉलम lg-8 और lg-4 को भी दिखाते हैं - जो वे आपको दिखा रहे हैं, वह यह है कि वे बड़े डिस्प्ले पर 8 और 4 कॉलम (कुल चौड़ाई के 2/3 + 1/3) को फैलाएंगे, और 12 और 6 (फोन की पंक्ति की पूर्ण चौड़ाई + 1/2) प्रदर्शित करता है। उम्मीद है की वो मदद करदे!

— शॉन टेलर

Answer 2

बूटस्ट्रैप ग्रिड सिस्टम में चार वर्ग होते हैं:
xs (फोन के लिए)
sm (टेबलेट के लिए)
md (डेस्कटॉप के लिए)
lg (बड़े डेस्कटॉप के लिए)

अधिक गतिशील और लचीली लेआउट बनाने के लिए ऊपर की कक्षाओं को जोड़ा जा सकता है।

युक्ति: प्रत्येक वर्ग ऊपर जाता है, इसलिए यदि आप xs और sm के लिए समान चौड़ाई निर्धारित करना चाहते हैं, तो आपको केवल x निर्दिष्ट करने की आवश्यकता है।

ठीक है, उत्तर आसान है, लेकिन इस पर पढ़ें:

कॉल-lg- स्तंभ बड़े के लिए खड़ा ≥ 1200px
कॉल-md- स्तंभ माध्यम के लिए खड़ा ≥ 992px
कॉल-xs- स्तंभ अतिरिक्त छोटे के लिए खड़ा है≥ 768px

पिक्सेल संख्या ब्रेकप्वाइंट हैं, इसलिए उदाहरण के col-xsलिए तत्व को लक्षित कर रहा है जब खिड़की 768px (संभावित मोबाइल उपकरणों) से छोटी है ...

मैंने यह दिखाने के लिए नीचे की छवि भी बनाई कि ग्रिड सिस्टम कैसे काम करता है, इस उदाहरण में मैं उन्हें 3 के साथ उपयोग करता हूं, जैसे col-lg-6कि आपको दिखाना है कि ग्रिड सिस्टम पेज में कैसे काम करता है lg, कैसे देखें , mdऔर xsखिड़की के आकार के लिए उत्तरदायी हैं:

Comments

col-xs-*बूटस्ट्रैप 4 के पक्ष में छोड़ दिया गया हैcol-*

— ज़ोहब अली

क्या आप कृपया HTML (और किसी भी CSS) को साझा कर सकते हैं? धन्यवाद।

— NoChance

Answer 3

मुख्य बात यह है:

col-lg-* col-md-* col-xs-* col-sm परिभाषित करें कि इन विभिन्न स्क्रीन आकारों में कितने स्तंभ होंगे।

उदाहरण: यदि आप चाहते हैं कि डेस्कटॉप स्क्रीन में दो कॉलम हों और फोन स्क्रीन में आप अपने कॉलम में दो col-md-6और दो col-xs-6वर्ग रखें।

यदि आप चाहते हैं कि डेस्कटॉप स्क्रीन में दो कॉलम हों और फोन स्क्रीन में केवल एक कॉलम हो (यानी एक दूसरे के ऊपर दो पंक्तियां) two col-md-6और col-xs-12आपके कॉलम में दो और क्योंकि राशि 24 होगी, क्योंकि वे प्रत्येक के ऊपर ऑटो स्टैक होंगे अन्य, या बस xsशैली को छोड़ दें ।

Answer 4

से ट्विटर बूटस्ट्रैप प्रलेखन :

• छोटा ग्रिड (grid 768px) = .col-sm-*,
• मध्यम ग्रिड (grid 992px) = .col-md-*,
• बड़ी ग्रिड (grid 1200px) = .col-lg-*।

आगे पढ़ें ...

Answer 5

हेयर यू गो

col-lg-2: यदि स्क्रीन बड़ी है ( lg ) तो यह घटक 2 तत्वों की जगह लेगा, पूरी पंक्ति पर विचार करने से 12 तत्व फिट हो सकते हैं (इसलिए आप देखेंगे कि बड़ी स्क्रीन पर यह घटक पंक्ति का 16% स्थान लेता है)

col-lg-6: यदि स्क्रीन बड़ी ( lg ) है, तो यह घटक 6 तत्वों का स्थान लेगा, इस पर विचार करते हुए पूरी पंक्ति 12 तत्वों को फिट कर सकती है - जब लागू किया जाता है, तो आप देखेंगे कि घटक ने पंक्ति में आधा उपलब्ध स्थान ले लिया है।

ऊपर का नियम केवल तभी लागू होता है जब स्क्रीन बड़ी हो। जब स्क्रीन छोटा होता है तो इस नियम को छोड़ दिया जाता है और प्रति पंक्ति केवल एक घटक दिखाया जाता है।

नीचे दी गई छवि विभिन्न स्क्रीन आकार चौड़ाई दिखाती है: