Bootstrap में col-lg- *, col-md- * और col-sm- * में क्या अंतर है?

Question

के बीच क्या अंतर है col-lg-*, col-md-*और col-sm-*ट्विटर बूटस्ट्रैप में?

Comments

प्रत्येक के आयामों के लिए getbootstrap.com/css देखें px।

— जोश क्रोज़िएर Josh

मुझे पता है लेकिन समझ में नहीं आता कि यह प्रभाव है

— StreetCoder

मुझे यह भ्रामक लगता है कि यह सवाल है bootstrap-3और bootstrap-4एक टैग के रूप में क्योंकि वे पूरी तरह से अलग हैं

— कोलोब कैनियन

Answer 1

अपडेट किया गया 2019 ...

बूटस्ट्रैप 3 ग्रिड में आता है 4 स्तरों (या "breakpoints") ...

• अतिरिक्त छोटे (स्मार्टफोन के लिए .col-xs-*)
• छोटी (गोलियों के लिए .col-sm-*)
• मध्यम (लैपटॉप के लिए .col-md-*)
• बड़े (लैपटॉप / डेस्कटॉप के लिए .col-lg-*)।

ये ग्रिड आकार आपको विभिन्न चौड़ाई पर ग्रिड व्यवहार को नियंत्रित करने में सक्षम बनाते हैं। अलग-अलग स्तरों को सीएसएस मीडिया प्रश्नों द्वारा नियंत्रित किया जाता है ।

तो बूटस्ट्रैप के 12-कॉलम ग्रिड में ...

col-sm-3एक सामान्य छोटे उपकरण की चौड़ाई (> 768 पिक्सेल) पर 3 से 12 कॉलम चौड़ा (25% ) है

col-md-3एक सामान्य मध्यम उपकरण चौड़ाई (> 992 पिक्सेल) पर 3 से 12 कॉलम चौड़ा (25% ) है

---

छोटा टियर ( या xs, ) बड़े स्क्रीन चौड़ाई के लिए आकार को भी परिभाषित करता हैsmmd । इसलिए, सभी स्तरों पर समान आकार के कॉलम के लिए, बस सबसे छोटे व्यूपोर्ट के लिए चौड़ाई निर्धारित करें ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> के समान है,

<div class="col-sm-3">..</div>

बड़े स्तरों निहित हैं। क्योंकि col-sm-3इसका मतलब है 3 units on sm-and-up, जब तक कि विशेष रूप से एक बड़े टियर द्वारा ओवरराइड नहीं किया जाता है जो एक अलग आकार का उपयोग करता है।

xs(डिफ़ॉल्ट)> ओवरराइड द्वारा sm> ओवरराइड द्वारा md> ओवरराइड द्वाराlg

---

विभिन्न ग्रिड आकारों पर परिवर्तन स्तंभ चौड़ाई का उपयोग करने के लिए कक्षाओं को मिलाएं । यह एक उत्तरदायी लेआउट बनाता है।

<div class="col-md-3 col-sm-6">..</div>

sm, mdऔर lgग्रिड सब "ढेर" पर स्क्रीन / व्यूपोर्ट खड़ी 768 पिक्सल की तुलना में कम होगा। यह वह जगह है जहां xsग्रिड अंदर फिट बैठता है। col-xs-*कक्षाओं का उपयोग करने वाले कॉलम ऊर्ध्वाधर रूप से स्टैक नहीं होंगे , और सबसे छोटी स्क्रीन पर स्केल करना जारी रखेंगे।

इस डेमो का उपयोग करके अपने ब्राउज़र का आकार बदलें और आप ग्रिड स्केलिंग प्रभाव देखेंगे।

---

बूटस्ट्रैप ४

में बूटस्ट्रैप 4 एक नया है -xl-आकार, देखने के इस डेमो । साथ ही -xs-इन्फिक्स को हटा दिया गया है , इसलिए सबसे छोटे कॉलम बस col-1, col-2.. col-12आदि हैं।

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

बूटस्ट्रैप 4 ग्रिड डेमो

इसके अतिरिक्त, बूटस्ट्रैप 4 में नए ऑटो-लेआउट कॉलम शामिल हैं । इनमें उत्तरदायी ब्रेकप्वाइंट ( colऔर col-sm, col-mdआदि) भी हैं, लेकिन% चौड़ाई परिभाषित नहीं है। इसलिए, ऑटो-लेआउट कॉलम पंक्ति में समान चौड़ाई भरते हैं ।

---

यह आलेख बूटस्ट्रैप ग्रिड के बारे में अधिक बताता है

Comments

कॉलिंग-एसएम के भीतर नेस्टिंग-एस.एम. का असर क्या होता है? यह कॉल-एसएम और कॉल-एमडी के व्यवहार को कैसे बदलेगा?

— डोनैटो

यह smसंकरी चौड़ाई में स्तंभों में नेस्टेड रहने का कारण बनता है । खुद के लिए प्रयास करें: codeply.com/go/LGyFiEJqXq

— Zim

@Skelly, क्या मैं आपको एक उत्तरदायी डिज़ाइन से संबंधित प्रश्न पर नज़र डालने के लिए कह सकता हूँ: tinyurl.com/nadfh2u ?

— इस्तियाक अहमद

क्यों है <div class="col-sm-3">..</div>के रूप में ही <div class="col-lg-3 col-md-4 col-sm-3">..</div>नहीं है और <div class="col-lg-3 col-md-3 col-sm-3">..</div>(xx-3 सभी के लिए)?

— jbyrd

धन्यवाद .. मैं तय है कि: <div class="col-lg-3 col-md-3 col-sm-3">..</div>रूप में ही है<div class="col-sm-3">..</div>

— Zim

Answer 2

बूटस्ट्रैप डॉक्स इसे स्पष्ट करते हैं, लेकिन इसे प्राप्त करने में अभी भी मुझे कुछ समय लगा है। यह अधिक समझ में आता है जब मैं इसे दो में से एक तरीके से समझाता हूं:

यदि आपको लगता है कि कॉलम क्षैतिज रूप से शुरू हो रहा है, तो आप चुन सकते हैं कि आप कब उन्हें स्टैक करना चाहते हैं ।

उदाहरण के लिए, यदि आप कॉलम के साथ शुरू करते हैं: एबीसी

आप तय करते हैं कि उन्हें इस तरह से कब होना चाहिए:

ए

बी

सी

यदि आप col-lg चुनते हैं, तो कॉलम <1200px की चौड़ाई होने पर स्टैक हो जाएगा।

यदि आप col-md चुनते हैं, तो चौड़ाई <992px होने पर कॉलम ढेर हो जाएगा।

यदि आप col-sm चुनते हैं, तो चौड़ाई <768px है, तो कॉलम ढेर हो जाएंगे।

यदि आप कॉल-एक्स चुनते हैं, तो कॉलम कभी भी ढेर नहीं होंगे।

दूसरी ओर, यदि आपको लगता है कि स्तंभों का ढेर शुरू हो गया है, तो आप यह चुन सकते हैं कि वे किस बिंदु पर क्षैतिज हो जाते हैं :

यदि आप col-sm चुनते हैं, तो चौड़ाई> = 768px होने पर कॉलम क्षैतिज हो जाएगा।

यदि आप col-md चुनते हैं, तो चौड़ाई> = 992px होने पर कॉलम क्षैतिज हो जाएगा।

यदि आप col-lg चुनते हैं, तो चौड़ाई> = 1200px होने पर कॉलम क्षैतिज हो जाएगा।

Comments

यह उत्तर इसे सबसे अच्छा समझाता है। कम से कम मेरे लिए तो यह किया। यह सब मुझे जानना आवश्यक था: "यदि आप कोल-एलजी चुनते हैं, तो चौड़ाई <1200px" होने पर कॉलम स्टैक हो जाएगा। " धन्यवाद!

— जो स्मो

यह है कि आप एक एलेवेटर की सवारी में कैसे समझाते हैं और फिर भी आपकी व्याख्या समझ में आती है।

— केविन ले - खनेले

मुझे पता है कि यह पुराना है, इसलिए इससे कोई फर्क नहीं पड़ता कि क्या कर्नल- * मैं चुनता हूं कि यह आखिरकार विभिन्न आकारों पर स्टैक करेगा?

— null

इसने बूटस्ट्रैप की मेरी समझ को पुनर्जीवित किया।

— kds23

Answer 3

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

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

Answer 4

मुझे लगता है कि इस बारे में भ्रमित करने वाला पहलू यह है कि बूटस्ट्रैप 3 एक मोबाइल पहला उत्तरदायी सिस्टम है और यह समझाने में विफल रहता है कि यह बूटस्ट्रैप प्रलेखन के उस हिस्से में कॉल-एक्सएक्सएक्स-एन पदानुक्रम को कैसे प्रभावित करता है। यह आपको आश्चर्यचकित करता है कि छोटे उपकरणों पर क्या होता है यदि आप बड़े उपकरणों के लिए एक मूल्य चुनते हैं और आपको आश्चर्य होता है कि क्या कई मूल्यों को निर्दिष्ट करने की आवश्यकता है। (आप)

मैं यह कहकर स्पष्ट करने का प्रयास करूंगा कि ... कम अनाज प्रकार (xs, sm) प्रयास छोटे स्क्रीन और बड़े प्रकार (md, lg) पर लेआउट उपस्थिति बनाए रखने के लिए केवल बड़ी स्क्रीन पर सही ढंग से प्रदर्शित करेगा, लेकिन छोटे उपकरणों पर कॉलम लपेटेगा। पिछले उदाहरणों में उद्धृत मूल्य थ्रेशोल्ड को संदर्भित करते हैं, जो बूटस्ट्रैप उपलब्ध स्क्रीन एस्टेट को फिट करने के लिए उपस्थिति को नीचा दिखाता है।

व्यवहार में इसका मतलब यह है कि यदि आप कॉलम कोलो-एक्स-एन बनाते हैं, तो वे बहुत छोटे स्क्रीन पर भी सही उपस्थिति बनाए रखेंगे, जब तक कि खिड़की एक आकार तक नहीं गिरती है जो इतना प्रतिबंध है कि पृष्ठ को सही ढंग से प्रदर्शित नहीं किया जा सकता है। इसका मतलब यह होना चाहिए कि जिन उपकरणों की चौड़ाई 768px या उससे कम है, उन्हें आपकी तालिका दिखानी चाहिए क्योंकि आपने इसे नीचा (एकल या लिपटे हुए स्तंभ रूप) के बजाय डिज़ाइन किया है। जाहिर है कि यह अभी भी कॉलम की सामग्री पर निर्भर करता है और यह संपूर्ण बिंदु है। यदि पृष्ठ बड़े डेटा के कई स्तंभों को प्रदर्शित करने का प्रयास करता है, तो एक छोटी स्क्रीन पर कंधे से कंधा मिलाकर स्वाभाविक रूप से एक भयानक तरीके से लपेटेगा यदि आपने इसके लिए खाता नहीं बनाया है। इसलिए, स्तंभों के भीतर डेटा के आधार पर आप उस बिंदु को तय कर सकते हैं जिस पर सामग्री को पर्याप्त रूप से प्रदर्शित करने के लिए लेआउट का बलिदान किया जाता है।

उदा। यदि आपके पृष्ठ में तीन col-sm-n कॉलम बूटस्ट्रैप हैं, तो स्तंभ की पंक्तियों को उन पंक्तियों में लपेट दिया जाएगा जब पृष्ठ की चौड़ाई 992px से कम हो जाती है। इसका मतलब है कि डेटा अभी भी दिखाई दे रहा है लेकिन इसे देखने के लिए लंबवत स्क्रॉलिंग की आवश्यकता होगी। यदि आप अपने लेआउट को नीचा दिखाना नहीं चाहते हैं, तो x चुनें (जब तक कि आपके डेटा को तीन स्तंभों में कम रिज़ॉल्यूशन डिवाइस पर पर्याप्त रूप से प्रदर्शित नहीं किया जा सकता)

यदि डेटा की क्षैतिज स्थिति महत्वपूर्ण है, तो आपको दृश्य प्रकृति को बनाए रखने के लिए कम ग्रैन्युलैरिटी मूल्यों को चुनने की कोशिश करनी चाहिए। यदि स्थिति कम महत्वपूर्ण है, लेकिन पेज सभी उपकरणों पर दिखाई देना चाहिए तो उच्च मूल्य का उपयोग किया जाना चाहिए।

यदि आप col-lg-n चुनते हैं, तो कॉलम सही ढंग से प्रदर्शित होगा जब तक कि स्क्रीन की चौड़ाई 1200px के xs सीमा से नीचे न जाए।

Comments

मुझे लगता है कि यह वही है जो ओपी (कच्चे नंबर नहीं) के लिए पूछ रहा था, लेकिन उस पर भड़क गया।

— bvgheluwe

मैं मानता हूं कि यह स्वीकृत उत्तर होना चाहिए क्योंकि यह विभिन्न आकारों के व्यवहार को बताता है।

— MeMeMax

Answer 5

डिवाइस आकार और वर्ग उपसर्ग:

• अतिरिक्त छोटे डिवाइस फ़ोन (<768px) - .col-xs-
• छोटे उपकरण टैबलेट (devices768px) - .col-sm-
• मध्यम उपकरण डेस्कटॉप (2992px) - .col-md-
• बड़े उपकरण डेस्कटॉप (px1200px) - .col-lg-

ग्रिड विकल्प:

संदर्भ: ग्रिड सिस्टम

Answer 6

टी एल; डॉ

.col-X-Yस्क्रीन आकार X और ऊपर का मतलब है , Y कॉलम भरने के लिए इस तत्व को बढ़ाएं ।

बूटस्ट्रैप प्रति 12 कॉलम का ग्रिड प्रदान करता है .row, इसलिए Y = 3 का अर्थ चौड़ाई = 25% है।

xs, sm, md, lg क्रमशः स्मार्टफोन, टैबलेट, लैपटॉप, डेस्कटॉप के लिए आकार हैं।

अलग-अलग स्क्रीन साइज़ पर अलग-अलग चौड़ाई निर्दिष्ट करने का उद्देश्य यह है कि आप छोटी स्क्रीन पर चीजों को बड़ा बना सकें।

उदाहरण

<div class="col-lg-6 col-xs-12">

अर्थ: डेस्कटॉप पर 50% चौड़ाई, मोबाइल, टेबलेट और लैपटॉप पर 100% चौड़ाई।

Answer 7

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

Answer 8

एक विशेष मामला: बूटस्ट्रैप ग्रिड सिस्टम सीखने से पहले, सुनिश्चित करें कि ब्राउज़र ज़ूम 100% (सौ प्रतिशत) पर सेट है। उदाहरण के लिए: यदि स्क्रीन रिज़ॉल्यूशन (1600px x 900px) और ब्राउज़र ज़ूम 175% है, तो "बूटस्ट्रैप-पेड" तत्व ढेर हो जाएंगे।

एचटीएमएल

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

क्रोम ज़ूम 100%

ब्राउज़र 100 प्रतिशत - तत्वों को क्षैतिज रूप से रखा गया

क्रोम ज़ूम 175%

ब्राउज़र 175 प्रतिशत - ढेर तत्वों

Answer 9

चलिए बिना जटिल बूटस्ट्रैप के!

ध्यान दें कि कॉल-एसएम नीचे की 100% चौड़ाई (अन्य शब्दों में नई लाइन में टूट जाता है) पर कैसे कब्जा करता है, 576pxलेकिन कॉल नहीं करता है। आप gif में शीर्ष केंद्र पर वर्तमान चौड़ाई देख सकते हैं।

यहाँ कोड आता है:

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

डिफ़ॉल्ट रूप से बूटस्ट्रैप एक ही पंक्ति में सभी कॉलम (कॉल) को समान चौड़ाई के साथ संरेखित करता है । इस मामले में तीनcol प्रत्येक 100% / 3 चौड़ाई पर कब्जा कर लेंगे, जो भी स्क्रीन आकार। आप देख सकते हैं कि gif में।

अब क्या होगा यदि हम प्रति पंक्ति केवल एक कॉलम प्रस्तुत करना चाहते हैं अर्थात प्रत्येक कॉलम को १००% चौड़ाई दें लेकिन केवल छोटे स्क्रीन के लिए ? अब आती है col-xxकक्षाएं!

मैंने इस्तेमाल किया col-smक्योंकि मैं 576px नीचे के कॉलम को अलग-अलग लाइनों में तोड़ना चाहता था। ये 4 col-xxकक्षाएं विभिन्न डिस्प्ले डिवाइस जैसे मोबाइल, टैबलेट, लैपटॉप, बड़े मॉनिटर आदि के लिए बूटस्ट्रैप द्वारा प्रदान की जाती हैं।

तो, col-sm576px से नीचे टूट जाएगा, col-md768px col-lgनीचे टूट जाएगा , 992px से col-xlनीचे टूट जाएगा और 1200px नीचे टूट जाएगा

ध्यान दें कि col-xsबूटस्ट्रैप 4 में कोई वर्ग नहीं है ।

यह बहुत ज्यादा रकम है। आप काम पर वापस जा सकते हैं।

---

लेकिन वहाँ यह करने के लिए थोड़ा और अधिक है। अब col-*और col-xx-*चौड़ाई को अनुकूलित करने के लिए आता है ।

उपरोक्त उदाहरण में याद रखें कि मैंने उल्लेख किया है colया col-xxएक पंक्ति में बराबर चौड़ाई लेता है। इसलिए यदि हम किसी विशिष्ट को अधिक चौड़ाई देना चाहते हैं तो हम colऐसा कर सकते हैं।

बूटस्ट्रैप पंक्ति को 12 भागों में विभाजित किया गया है, इसलिए ऊपर के उदाहरण में 3 थे colइसलिए प्रत्येक एक 12/3 = 4 भाग लेता है। आप चौड़ाई को मापने के तरीके के रूप में इन भागों पर विचार कर सकते हैं।

हम यह भी लिख सकता है कि प्रारूप में col-*यानी col-4इस तरह:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

और इससे कोई अंतर नहीं पड़ता क्योंकि डिफ़ॉल्ट बूटस्ट्रैप द्वारा col(4 + 4 + 4 = 12) को समान चौड़ाई मिलती है ।

लेकिन, क्या होगा यदि हम १ से to भाग col, २ को ३ भाग colऔर २ भाग (१२--3-३ = २) को ३ col( to + ३ + २ तो बाकी १२ करना चाहते हैं), हम बस यह कर सकते हैं:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

और आप col-xx-*कक्षाओं की चौड़ाई को भी अनुकूलित कर सकते हैं।

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

कार्रवाई में यह कैसे दिखता है?

क्या होगा यदि राशि col12 से अधिक है? तब colवसीयत नीचे की पंक्ति में शिफ्ट / समायोजित हो जाएगी। हां, एक पंक्ति के लिए किसी भी संख्या में कॉलम हो सकते हैं!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

क्या होगा अगर हम बड़ी स्क्रीन के लिए एक पंक्ति में 3 कॉलम चाहते हैं लेकिन इन कॉलम को छोटे स्क्रीन के लिए 2 पंक्तियों में विभाजित करें ?

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

आप यहाँ खेल सकते हैं: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

Answer 10

मुझे लगता है कि इस छवि को अवधारणा को बेहतर ढंग से समझना बहुत अच्छा है!

अधिक विस्तार से समझने के लिए कृपया नीचे दिए गए लिंक पर जाएं:

https://getbootstrap.com/docs/3.4/css/

Answer 11

अच्छी तरह से इसका उपयोग बूटस्ट्रैप को बताने के लिए किया जाता है कि स्क्रीन के आकार के आधार पर एक पंक्ति में कितने कॉलम रखे जा सकते हैं-

col-xs-2

अतिरिक्त छोटी (xs) स्क्रीन में एक पंक्ति में केवल 2 कॉलम दिखाएगा, उसी तरह जैसे कि sm एक छोटी स्क्रीन, md (मध्यम आकार), lg (बड़े आकार) को परिभाषित करता है, लेकिन बूटस्ट्रैप छोटे पहले नियम के अनुसार, यदि आप उल्लेख करते हैं

xs-col-2 md-col-4

तब 2 कॉलम हर पंक्ति में स्क्रीन साइज़ के लिए xs से लेकर sm (शामिल) और तब बदले जाते हैं, जब इसे अगला आकार मिलता है यानी md तक lg (शामिल) के लिए स्क्रीन साइज़ की बेहतर समझ के लिए इन्हें विभिन्न स्क्रीन मोड में चलाने की कोशिश करें क्रोम के डेवलपर मोड (ctr + Shift + i) और विभिन्न पिक्सेल या डिवाइस आज़माएं