Гаттерлар

Гуттерлар - сезнең баганалар арасындагы паддер, Bootstrap челтәр системасында җаваплы урын һәм эчтәлекне тигезләү өчен кулланыла.

Бу биттә

Алар ничек эшлиләр

Чокырлар - горизонталь рәвештә ясалган багана эчтәлеге арасындагы аермалар padding. Без һәр баганага куябыз, һәм тискәре кулланабыз, padding-rightаны рәтнең башында һәм ахырында эчтәлекне тигезләү өчен.padding-leftmargin
Чокырлар 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балаларны .rowһәм горизонталь paddingбарлык балалар колонкаларыннан бетерә.

Кыр читенә дизайн кирәкме? Ата- ананы ташлагыз .containerяки .container-fluid.

Практикада, ул ничек күренә. Игътибар итегез, сез моны бүтән алдан билгеләнгән челтәр класслары белән куллануны дәвам итә аласыз (багана киңлеге, җаваплы дәрәҗәләр, чикләр һәм башкалар).

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

Чокырларны алыштырыгыз

Дәресләр $guttersSass картасыннан мирас итеп алынган $spacersSass картасыннан төзелгән.

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