Awọn gutters

Awọn gutters jẹ padding laarin awọn ọwọn rẹ, ti a lo lati ṣe idahun aaye ati ṣe deede akoonu ni eto akoj Bootstrap.

Lori iwe yi

Bawo ni wọn ṣe n ṣiṣẹ

Awọn gutters jẹ awọn alafo laarin akoonu ọwọn, ti a ṣẹda nipasẹ petele padding. A ṣeto padding-rightati padding-leftlori ọwọn kọọkan, ati lo odi marginlati ṣe aiṣedeede iyẹn ni ibẹrẹ ati ipari ti ila kọọkan lati mö akoonu.
Awọn gutters bẹrẹ ni 1.5rem( 24px) fife. Eyi n gba wa laaye lati ba akoj wa pọ si padding ati iwọn awọn alafo aaye .
Awọn gutters le ṣe atunṣe ni idahun. Lo awọn kilasi gota pato-breakpoint lati ṣe atunṣe awọn gọta petele, awọn gọta inaro, ati gbogbo awọn gọta.

Petele gutters

.gx-*awọn kilasi le ṣee lo lati ṣakoso awọn iwọn gota petele. Obi .containertabi .container-fluidobi le nilo lati ṣatunṣe ti o ba lo awọn gọta nla paapaa lati yago fun iṣan omi aifẹ, ni lilo ohun elo padding ti o baamu. Fun apẹẹrẹ, ninu apẹẹrẹ atẹle a ti pọ si padding pẹlu .px-4:

Aṣa ọwọn òwú

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

Ojutu yiyan ni lati ṣafikun ohun ipari ni ayika .rowpẹlu .overflow-hiddenkilasi naa:

Aṣa ọwọn òwú

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

inaro gọta

.gy-*awọn kilasi le ṣee lo lati ṣakoso awọn iwọn gota inaro. Gẹgẹbi awọn gogo petele, awọn gutters inaro le fa diẹ ninu ṣiṣan ni isalẹ .rowni opin oju-iwe kan. Ti eyi ba waye, o ṣafikun ohun ipari ni ayika .rowpẹlu .overflow-hiddenkilasi naa:

Aṣa ọwọn òwú

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

Petele & inaro gutters

.g-*Awọn kilasi le ṣee lo lati ṣakoso awọn iwọn gota petele, fun apẹẹrẹ atẹle a lo iwọn gọta kekere kan, nitorinaa kii yoo nilo lati ṣafikun .overflow-hiddenkilasi murasilẹ.

Aṣa ọwọn òwú

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

Awọn ọwọn ori ila

Awọn kilasi gutter tun le ṣe afikun si awọn ọwọn ila . Ninu apẹẹrẹ atẹle, a lo awọn ọwọn ila idahun ati awọn kilasi gota idahun.

Ọwọn ila

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

Ko si gọta

Awọn gọta laarin awọn ọwọn ninu awọn kilasi akoj ti a ti sọ tẹlẹ le yọkuro pẹlu .g-0. Eleyi yọ awọn odi margins lati .rowati awọn petele paddinglati gbogbo lẹsẹkẹsẹ omo ọwọn.

Ṣe o nilo apẹrẹ eti-si-eti? Ju obi .containertabi .container-fluid.

Ni iṣe, eyi ni bii o ṣe nwo. Ṣe akiyesi pe o le tẹsiwaju lati lo eyi pẹlu gbogbo awọn kilasi akoj ti a ti sọ tẹlẹ (pẹlu awọn iwọn ọwọn, awọn ipele idahun, awọn atunto, ati diẹ sii).

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

Yi awọn gotters pada

Awọn kilasi ti kọ lati $guttersmaapu Sass eyiti o jogun lati $spacersmaapu Sass.

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