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.

Katika ukurasa huu

Jinsi wanavyofanya kazi

Gutters ni mapengo kati ya maudhui ya safu, yaliyoundwa na usawa padding. Tunaweka padding-rightna padding-leftkwenye kila safu, na kutumia hasi marginili 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 .containerau .container-fluidmzazi 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:

Uwekaji safu maalum

<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 .rowna .overflow-hiddendarasa:

Uwekaji safu maalum

<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 .rowya mwisho wa ukurasa. Ikiwa hii itatokea, unaongeza kitambaa karibu .rowna .overflow-hiddendarasa:

Uwekaji safu maalum

<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-hiddendarasa la kanga.

Uwekaji safu maalum

<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.

Safu mlalo

<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 margins hasi kutoka .rowna mlalo paddingkutoka kwa safu wima zote za watoto.

Je, unahitaji muundo wa ukingo hadi ukingo? Acha mzazi .containerau .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).

.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>

Badilisha mifereji ya maji

Madarasa yamejengwa kutoka kwa $guttersramani ya Sass ambayo imerithiwa kutoka kwa $spacersramani 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,
);