यह पोस्ट चर्चा करेगी कि गटर स्पेस क्या हैं और बूटस्ट्रैप में एक विशिष्ट डिव के लिए उन्हें कैसे हटाया जा सकता है।
बूटस्ट्रैप में गटर स्पेस क्या है?
गटर क्षैतिज गद्दी द्वारा निर्मित स्तंभों के बीच के स्थान या अंतराल हैं। उनका उपयोग बूटस्ट्रैप ग्रिड सिस्टम में उत्तरदायी सामग्री संरेखण और रिक्त स्थान का समर्थन करने के लिए किया जाता है।
नीचे दी गई तस्वीर में एक पंक्ति दिखाई दे रही है जिसके चारों ओर एक लाल बॉर्डर है। पंक्ति के भीतर, समान ग्रिड स्तंभों के तीन समान आकार के दिव्य तत्व मौजूद हैं। हालाँकि स्तंभ समान हैं, फिर भी उनके बीच गटर स्थान हैं:
बूटस्ट्रैप में एक विशिष्ट डिव के लिए गटर स्पेस कैसे निकालें?
बूटस्ट्रैप में, वर्ग ' नो-गटर ” का उपयोग किसी भी div के गटर स्पेस को खत्म करने के लिए किया जाता है।
इस काम के लिए:
- एक जोड़ें ' <दिव> 'कक्षा के साथ टैग करें' मुख्य-विभाग ”।
- फिर, एक और 'जोड़कर एक पंक्ति अनुभाग समायोजित करें' <दिव> 'कक्षा के साथ तत्व' पंक्ति ”। जैसा कि हमें पंक्ति से रिक्त स्थान को हटाना है, एक वर्ग निर्दिष्ट करें ' नो-गटर ' इसके अंदर।
- ग्रिड पंक्ति को तीन समान स्तंभों में विभाजित करने के लिए, वर्ग का उपयोग करें ' कर्नल -4 ”।
- प्रत्येक कॉलम के '' कंटेनर के भीतर, '' तत्वों को कक्षाओं के साथ समायोजित करें ' कॉलम -1 ”, “ कॉलम -2 ', और ' स्तंभ -3 ', क्रमश: < डिव कक्षा = 'मेन-डिव' >
< डिव कक्षा = 'पंक्ति नो-गटर' >
< डिव कक्षा = 'कर्नल-4' >
< डिव कक्षा = 'कॉलम -1' < / डिव >
< / डिव >
< डिव कक्षा = 'कर्नल-4' >
< डिव कक्षा = 'स्तंभ -2' < / डिव >
< / डिव >
< डिव कक्षा = 'कर्नल-4' >
< डिव कक्षा = 'कॉलम -3' < / डिव >
< / डिव >
< / डिव >
< / डिव >सीएसएस
CSS सेक्शन में, HTML पेज में उल्लिखित क्लासेस को कई स्टाइलिंग प्रॉपर्टीज के साथ स्टाइल किया गया है।
स्टाइल 'मेन-डिव' क्लास
.मुख्य-विभाग {
चौड़ाई : 600पीएक्स;
मार्जिन: 50 पीएक्स ऑटो;
}' .मुख्य-विभाग 'वर्ग वाले div तत्व तक पहुँचने के लिए उल्लेख किया गया है' मुख्य-विभाग ”। इस वर्ग पर निम्नलिखित गुण लागू होते हैं:
- ' चौड़ाई 'तत्व की चौड़ाई को परिभाषित करता है।
- ' अंतर 'तत्व के चारों ओर रिक्ति सेट करता है।
शैली 'पंक्ति' वर्ग
।पंक्ति {
सीमा : 1 पीएक्स ठोस लाल;
}बूटस्ट्रैप ' पंक्ति 'वर्ग' के साथ जोड़ा गया है सीमा ' संपत्ति। यह ग्रिड पंक्ति को निर्दिष्ट चौड़ाई, शैली और रंग सीमा में लपेट देगा।
तीन वर्ग ' कॉलम -1 ”, “ कॉलम -2 ', और ' स्तंभ -3 'सीएसएस असाइन किए गए हैं' पीछे का रंग ' और ' कद ” गुण उन्हें प्रमुख बनाने के लिए।
शैली 'स्तंभ -1' वर्ग
।कॉलम- एक {
पार्श्वभूमि- रंग : फ़िरोज़ा;
कद : 200 पीएक्स;
}शैली 'स्तंभ -2' वर्ग
।कॉलम- 2 {
पार्श्वभूमि- रंग : बैंगनी;
कद : 200 पीएक्स;
}शैली 'स्तंभ -3' वर्ग
।कॉलम- 3 {
पार्श्वभूमि- रंग : पीले हरे;
कद : 200 पीएक्स;
}यह देखा जा सकता है कि ' <दिव> 'कक्षा के साथ कंटेनर' पंक्ति ' को उनके बीच बिना किसी गटर स्थान के सफलतापूर्वक समायोजित किया गया है:
हमने आपको सिखाया है कि बूटस्ट्रैप में एक विशिष्ट डिव के लिए गटर स्पेस कैसे निकालें।
निष्कर्ष
एक विशिष्ट div के लिए गटर रिक्त स्थान निकालने के लिए, वर्ग ' नो-गटर ' इस्तेमाल किया जा सकता है। इस उद्देश्य के लिए, 'जोड़ें' <दिव> 'तत्व' के साथ पंक्ति नो-गटर ' कक्षा। इस पोस्ट ने गटर स्पेस पर एक व्यापक गाइड प्रदान किया है और बूटस्ट्रैप में एक विशिष्ट डिव के लिए उन्हें कैसे समाप्त किया जा सकता है।