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

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

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

आशुलिपि वर्ग के साथ कौनों तत्व भा एकरे साइड सभ के सबसेट के रिस्पांसिव-फ्रेंडली 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>

नकारात्मक मार्जिन के बा

CSS में, marginगुण नकारात्मक मान के उपयोग कर paddingसकेला ( ना कर सकेला)। 4.2 के रूप में, हमनी के ऊपर सूचीबद्ध हर गैर-शून्य पूर्णांक आकार खातिर नकारात्मक मार्जिन उपयोगिता जोड़ले बानी जा (उदाहरण खातिर, 1, 2, 3, 4, 5)। ई उपयोगिता ब्रेकपॉइंट के पार ग्रिड कॉलम गटर के अनुकूलित करे खातिर आदर्श बा।

सिंटैक्स लगभग डिफ़ॉल्ट, पॉजिटिव मार्जिन यूटिलिटी सभ के समान बा, बाकी nअनुरोध कइल गइल साइज से पहिले के जोड़े के साथ। इहाँ एगो उदाहरण वर्ग बा जवन .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

इहाँ बूटस्ट्रैप ग्रिड के माध्यम ( md) ब्रेकपॉइंट आ ऊपर के अनुकूलित करे के एगो उदाहरण दिहल गइल बा। हमनी के .colपैडिंग के साथ बढ़ा देले बानी जा .px-md-5आ ओकरा बाद ओह के प्रतिकार कइले बानी जा कि साथ .mx-md-n5पर अभिभावक पर .row.

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>