Mifereji ya maji
Mifereji ya mifereji ya maji ni pedi kati ya safu wima zako, inayotumika kuweka nafasi kwa uwajibikaji na kupanga maudhui katika mfumo wa gridi ya Bootstrap.
Jinsi wanavyofanya kazi
-
Gutters ni mapengo kati ya maudhui ya safu, yaliyoundwa na usawa
padding
. Tunawekapadding-right
napadding-left
kwenye kila safu, na kutumia hasimargin
ili kukabiliana na hiyo mwanzoni na mwisho wa kila safu ili kupanga maudhui. -
Mifereji ya maji huanza kwa
1.5rem
(24px
) kwa upana. Hii huturuhusu kulinganisha gridi yetu na mizani ya padding na pambizo za spacers . -
Mifereji ya maji inaweza kurekebishwa kwa kuwajibika. Tumia aina za mifereji ya maji mahususi ili kurekebisha mifereji ya maji mlalo, mifereji ya maji wima na mifereji yote ya maji.
Mifereji ya mlalo
.gx-*
madarasa yanaweza kutumika kudhibiti upana wa gutter mlalo. Huenda mzazi .container
au .container-fluid
mzazi akahitaji kurekebishwa ikiwa mifereji mikubwa ya maji itatumika pia ili kuzuia kufurika kusikotakikana, kwa kutumia matumizi ya padding yanayolingana. Kwa mfano, katika mfano ufuatao tumeongeza pedi na .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>
Suluhisho mbadala ni kuongeza kitambaa karibu .row
na .overflow-hidden
darasa:
<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>
Mifereji ya wima
.gy-*
madarasa yanaweza kutumika kudhibiti upana wa gutter wima. Kama mifereji ya maji ya mlalo, mifereji ya maji ya wima inaweza kusababisha kufurika chini .row
ya mwisho wa ukurasa. Ikiwa hii itatokea, unaongeza kitambaa karibu .row
na .overflow-hidden
darasa:
<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>
Mifereji ya mlalo na wima
.g-*
madarasa yanaweza kutumika kudhibiti upana wa mfereji wa mlalo, kwa mfano ufuatao tunatumia upana mdogo wa mfereji, kwa hivyo hakutakuwa na haja ya kuongeza .overflow-hidden
darasa la kanga.
<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>
Nguzo za safu wima
Madarasa ya gutter pia yanaweza kuongezwa kwa safu mlalo . Katika mfano ufuatao, tunatumia safu wima za safu msikivu na madarasa ya mifereji ya maji.
<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>
Hakuna mifereji ya maji
Mifereji ya maji kati ya safu wima katika madarasa yetu ya gridi yaliyofafanuliwa awali yanaweza kuondolewa kwa .g-0
. Hii huondoa margin
s hasi kutoka .row
na mlalo padding
kutoka kwa safu wima zote za watoto.
Je, unahitaji muundo wa ukingo hadi ukingo? Acha mzazi .container
au .container-fluid
.
Kwa mazoezi, hii ndio jinsi inaonekana. Kumbuka unaweza kuendelea kutumia hii pamoja na madarasa mengine yote ya gridi yaliyofafanuliwa awali (ikiwa ni pamoja na upana wa safu wima, viwango vinavyoitikia, kupanga upya, na zaidi).
<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>
Badilisha mifereji ya maji
Madarasa yamejengwa kutoka kwa $gutters
ramani ya Sass ambayo imerithiwa kutoka kwa $spacers
ramani ya Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);