स्पेसिंग के बा

बूटस्ट्रैप में कौनों तत्व के रूप में संशोधन करे खातिर आशुलिपि रिस्पांसिव मार्जिन आ पैडिंग यूटिलिटी क्लास सभ के बिसाल रेंज सामिल बा।

कइसे काम करेला

आशुलिपि वर्ग के साथ कौनों तत्व भा एकरे साइड सभ के सबसेट के रिस्पांसिव-फ्रेंडली marginभा मान असाइन करीं। paddingअलग-अलग गुण, सभ गुण, आ ऊर्ध्वाधर आ क्षैतिज गुण सभ खातिर समर्थन शामिल बा। क्लास सभ के निर्माण डिफ़ॉल्ट सास मैप से कइल जाला जे से ले .25remके 3rem.

संकेतन के बारे में बतावल गइल बा

स्पेसिंग यूटिलिटी सभ जे सभ ब्रेकपॉइंट सभ पर लागू होखे लीं, से xsले के xl, इनहन में कौनों ब्रेकपॉइंट संक्षिप्त नाँव ना होला। एकर कारण ई बा कि ऊ क्लास सभ से min-width: 0ऊपर से लागू होलें, आ एह तरीका से मीडिया क्वेरी से बान्हल ना जालें। हालाँकि, बाकी ब्रेकपॉइंट सभ में ब्रेकपॉइंट संक्षिप्त रूप जरूर सामिल बा।

कक्षा सभ के नाँव , , , आ {property}{sides}-{size}खातिर xsआ {property}{sides}-{breakpoint}-{size}खातिर प्रारूप के इस्तेमाल से कइल जाला ।smmdlgxl

जहाँ संपत्ति में से एगो बा:

• m- सेट करे वाली कक्षा खातिरmargin
• p- सेट करे वाली कक्षा खातिरpadding

जहाँ पक्ष में से एगो बा:

• t- कक्षा खातिर जवन सेट करेला margin-topयाpadding-top
• b- कक्षा खातिर जवन सेट करेला margin-bottomयाpadding-bottom
• l- कक्षा खातिर जवन सेट करेला margin-leftयाpadding-left
• r- कक्षा खातिर जवन सेट करेला margin-rightयाpadding-right
• x- दुनों के सेट करे वाली कक्षा खातिर *-leftआ*-right
• y- दुनों के सेट करे वाली कक्षा खातिर *-topआ*-bottom
• खाली - अइसन क्लास सभ खातिर जे तत्व के सभ 4 साइड पर एगो marginया सेट करे लींpadding

जहाँ आकार में से एगो बा:

• 0margin- अइसन कक्षा सभ खातिर जे या paddingके सेट क के खतम करे लीं0
• 1- (डिफ़ॉल्ट रूप से) ओह कक्षा सभ खातिर जे marginया paddingके सेट करे लीं$spacer * .25
• 2- (डिफ़ॉल्ट रूप से) ओह कक्षा सभ खातिर जे marginया paddingके सेट करे लीं$spacer * .5
• 3- (डिफ़ॉल्ट रूप से) ओह कक्षा सभ खातिर जे marginया paddingके सेट करे लीं$spacer
• 4- (डिफ़ॉल्ट रूप से) ओह कक्षा सभ खातिर जे marginया paddingके सेट करे लीं$spacer * 1.5
• 5- (डिफ़ॉल्ट रूप से) ओह कक्षा सभ खातिर जे marginया paddingके सेट करे लीं$spacer * 3
• auto- ओह कक्षा खातिर जवन marginऑटो के सेट करेला

$spacers( सस मैप चर में प्रविष्टि जोड़ के रउआँ अउरी साइज जोड़ सकत बानी ।)

उदाहरण खातिर दिहल गइल बा

इहाँ एह वर्ग सभ के कुछ प्रतिनिधि उदाहरण दिहल गइल बा:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

क्षैतिज केंद्रीकरण के बा

एकरे अलावा, बूटस्ट्रैप में .mx-autoफिक्स्ड-विड्थ ब्लॉक लेवल सामग्री के क्षैतिज रूप से केंद्रित करे खातिर एगो क्लास भी शामिल बा-यानी कि सामग्री जेकरा लगे बा display: blockआ एगो widthसेट-क्षैतिज मार्जिन सभ के सेट क के auto।

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>