गटरहरू

गटरहरू तपाईंको स्तम्भहरू बीचको प्याडिङ हुन्, जुन बुटस्ट्र्याप ग्रिड प्रणालीमा उत्तरदायी रूपमा स्पेस र सामग्री पङ्क्तिबद्ध गर्न प्रयोग गरिन्छ।

यस पृष्ठमा

तिनीहरूले कसरी काम गर्छन्

गटरहरू स्तम्भ सामग्री बीचको अन्तरहरू हुन्, तेर्सो द्वारा सिर्जना गरिएको padding। हामी सेट गर्छौं padding-rightर padding-leftप्रत्येक स्तम्भमा, र marginसामग्री पङ्क्तिबद्ध गर्न प्रत्येक पङ्क्तिको सुरु र अन्त्यमा अफसेट गर्न नकारात्मक प्रयोग गर्छौं।
गटरहरू 1.5rem( 24px) चौडा मा सुरु हुन्छ। यसले हामीलाई हाम्रो ग्रिडलाई प्याडिङ र मार्जिन स्पेसर स्केलमा मिलाउन अनुमति दिन्छ।
गटरहरू उत्तरदायी रूपमा समायोजन गर्न सकिन्छ। तेर्सो नालीहरू, ठाडो नालीहरू, र सबै नालीहरू परिमार्जन गर्न ब्रेकपोइन्ट-विशिष्ट गटर वर्गहरू प्रयोग गर्नुहोस्।

तेर्सो नालीहरू

.gx-*कक्षाहरू तेर्सो नाली चौडाइहरू नियन्त्रण गर्न प्रयोग गर्न सकिन्छ। मिल्दो प्याडिङ युटिलिटी प्रयोग गरेर अनावश्यक ओभरफ्लोबाट बच्न ठूला नालीहरू पनि प्रयोग गरिएमा .containerवा अभिभावकलाई समायोजन गर्नुपर्ने हुन सक्छ। .container-fluidउदाहरणका लागि, निम्न उदाहरणमा हामीले प्याडिङ बढाएका छौं .px-4:

अनुकूलन स्तम्भ प्याडिङ

<div class="container px-4">
  <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एक वैकल्पिक समाधान .overflow-hiddenवर्गको वरिपरि र्यापर थप्नु हो :

अनुकूलन स्तम्भ प्याडिङ

<div class="container overflow-hidden">
  <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-*ठाडो नाली चौडाइहरू नियन्त्रण गर्न कक्षाहरू प्रयोग गर्न सकिन्छ। तेर्सो नालीहरू जस्तै, ठाडो नालीहरूले .rowपृष्ठको अन्त्यमा केही ओभरफ्लो हुन सक्छ। यदि यो हुन्छ भने, तपाइँ कक्षाको .rowसाथ वरिपरि एउटा र्यापर थप्नुहोस् :.overflow-hidden

अनुकूलन स्तम्भ प्याडिङ

<div class="container overflow-hidden">
  <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-hiddenकक्षाहरू तेर्सो नाली चौडाइहरू नियन्त्रण गर्न प्रयोग गर्न सकिन्छ, निम्न उदाहरणका लागि हामी सानो गटर चौडाइ प्रयोग गर्छौं, त्यसैले त्यहाँ र्यापर वर्ग थप्न आवश्यक पर्दैन ।

अनुकूलन स्तम्भ प्याडिङ

<div class="container">
  <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>

पङ्क्ति स्तम्भहरू गटरहरू

पङ्क्ति स्तम्भहरूमा गटर कक्षाहरू पनि थप्न सकिन्छ । निम्न उदाहरणमा, हामी उत्तरदायी पङ्क्ति स्तम्भहरू र उत्तरदायी गटर वर्गहरू प्रयोग गर्छौं।

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

<div class="container">
  <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।

अभ्यासमा, यहाँ यो कस्तो देखिन्छ। नोट गर्नुहोस् कि तपाइँ यसलाई अन्य सबै पूर्वनिर्धारित ग्रिड कक्षाहरू (स्तम्भ चौडाइहरू, प्रतिक्रियाशील तहहरू, पुन: क्रमहरू, र थप सहित) प्रयोग गर्न जारी राख्न सक्नुहुन्छ।

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <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,
);