गटरहरू
गटरहरू तपाईंको स्तम्भहरू बीचको प्याडिङ हुन्, जुन बुटस्ट्र्याप ग्रिड प्रणालीमा उत्तरदायी रूपमा स्पेस र सामग्री पङ्क्तिबद्ध गर्न प्रयोग गरिन्छ।
तिनीहरूले कसरी काम गर्छन्
-
गटरहरू स्तम्भ सामग्री बीचको अन्तरहरू हुन्, तेर्सो द्वारा सिर्जना गरिएको
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
। यसले सबै तत्काल बच्चा स्तम्भहरूबाट नकारात्मक margin
s .row
र तेर्सो हटाउँछ।padding
किनारा देखि किनारा डिजाइन चाहिन्छ? अभिभावक .container
वा छोड्नुहोस् .container-fluid
।
अभ्यासमा, यहाँ यो कस्तो देखिन्छ। नोट गर्नुहोस् कि तपाइँ यसलाई अन्य सबै पूर्वनिर्धारित ग्रिड कक्षाहरू (स्तम्भ चौडाइहरू, प्रतिक्रियाशील तहहरू, पुन: क्रमहरू, र थप सहित) प्रयोग गर्न जारी राख्न सक्नुहुन्छ।
<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,
);