in English

नालिकानि

Gutters भवतः स्तम्भानां मध्ये पैडिंग् अस्ति, यस्य उपयोगः Bootstrap grid प्रणाल्यां सामग्रीं प्रतिक्रियापूर्वकं स्थानं संरेखयितुं च भवति ।

इस पृष्ठ पर

ते कथं कार्यं कुर्वन्ति

नाली स्तम्भ सामग्री के बीच अंतराल हैं, क्षैतिज द्वारा निर्मित padding. वयं प्रत्येकं स्तम्भे padding-rightच सेट् कुर्मः , तथा च सामग्रीं संरेखयितुं प्रत्येकपङ्क्तौ आरम्भे अन्ते च तत् आफ्सेट् कर्तुं negative इत्यस्य उपयोगं कुर्मः ।padding-leftmargin
1.5remनाली ( 24px) विस्तृत पर प्रारम्भ होती है। एतेन अस्माकं grid इत्यस्य padding तथा margin spacers scale इत्यनेन सह मेलनं कर्तुं शक्यते ।
गटर प्रतिक्रियाशीलरूपेण समायोजितुं शक्यते। क्षैतिजगटर, ऊर्ध्वाधर नाली, सभी नाली को संशोधित करने के लिए ब्रेकपॉइंट-विशिष्ट नाली वर्गों का उपयोग करें।

क्षैतिज नाली

.gx-*वर्गाणां उपयोगेन क्षैतिजनालिकानां विस्ताराणां नियन्त्रणं कर्तुं शक्यते । .containerअथवा माता - .container-fluidपिता को समायोजित करने की आवश्यकता हो सकती है यदि बृहत्तर गटरों का भी उपयोग किया जाता है अवांछित अतिप्रवाह को परिहार करने के लिए, एक मिलान पैडिंग उपयोगिता का उपयोग करके। यथा, निम्नलिखित उदाहरणे वयं padding - इत्यनेन वर्धितवन्तः .px-4:

कस्टम स्तम्भ गद्दी

html

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

.rowएकः वैकल्पिकः समाधानः अस्ति यत् the with the .overflow-hiddenclass इत्यस्य परितः एकं wrapper योजयितुं शक्यते :

कस्टम स्तम्भ गद्दी

html

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ऊर्ध्वाधर नाली

.gy-*classes इत्यस्य उपयोगेन पङ्क्तेरन्तर्गतं ऊर्ध्वाधरगटरविस्तारं नियन्त्रयितुं शक्यते यदा स्तम्भाः नूतनरेखासु वेष्टयन्ति । क्षैतिजनालिकानां इव ऊर्ध्वाधरनालिकाः .rowपृष्ठस्य अन्ते अधः किञ्चित् अतिप्रवाहं जनयितुं शक्नुवन्ति । यदि एतत् भवति तर्हि भवन्तः वर्गेण .rowसह एकं wrapper around योजयन्ति :.overflow-hidden

कस्टम स्तम्भ गद्दी

html

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

क्षैतिज एवं ऊर्ध्वाधर नाली

.g-*.overflow-hiddenclasses इत्यस्य उपयोगः क्षैतिज-गटर-विस्तारं नियन्त्रयितुं शक्यते, निम्नलिखित-उदाहरणार्थं वयं लघुतरं गटर-विस्तारं उपयुञ्ज्महे, अतः wrapper-वर्गं योजयितुं आवश्यकता न भविष्यति ।

कस्टम स्तम्भ गद्दी

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

पंक्ति स्तम्भ नाली

पङ्क्तिस्तम्भेषु गटरवर्गाः अपि योजयितुं शक्यन्ते | निम्नलिखित उदाहरणे वयं responsive row columns तथा responsive gutter classes इत्यस्य उपयोगं कुर्मः ।

पङ्क्तिस्तम्भः

html

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

न नालिकाः

अस्माकं पूर्वनिर्धारितजालवर्गेषु स्तम्भानां मध्ये गटर्स् - इत्यनेन सह निष्कासयितुं शक्यते .g-0। एतेन सर्वेभ्यः तत्कालीनबालस्तम्भेभ्यः ऋणात्मकः margins अपि .rowच क्षैतिजः निष्कासितः भवति ।padding

एज-टू-एज डिजाइन आवश्यक है? मातापितरं .containerवा पातयन्तु तथा च अतिप्रवाहं निवारयितुं योजयन्तु .container-fluid।.mx-0.row

व्यवहारे अत्र कथं दृश्यते। ध्यानं कुर्वन्तु अन्यैः सर्वैः पूर्वनिर्धारितजालवर्गैः (स्तम्भविस्ताराः, प्रतिक्रियाशीलस्तराः, पुनःक्रमाः, इत्यादीनि समाविष्टानि) सह भवान् एतस्य उपयोगं निरन्तरं कर्तुं शक्नोति ।

.कोल-स्म-६ .कोल-मद्-८

.कोल-६ .कोल-मद्-४

html

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

नाली परिवर्तित करें

कक्षाः सास् मानचित्रात् निर्मिताः भवन्ति यत् $guttersसास् मानचित्रात् उत्तराधिकाररूपेण प्राप्तम् अस्ति $spacers।

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);