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ú

html

<div class="container px-4 text-center">
  <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ú

html

<div class="container overflow-hidden text-center">
  <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 laarin ọna kan nigbati awọn ọwọn ba fi ipari si awọn laini tuntun. 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ú

html

<div class="container overflow-hidden text-center">
  <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ú

html

<div class="container text-center">
  <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 igun ọwọn 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

html

<div class="container text-center">
  <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 silẹ .containertabi .container-fluidki o ṣafikun .mx-0si .rowlati ṣe idiwọ sisan.

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

html

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