in English

Жолабы

Жолабы - гэта пракладка паміж вашымі слупкамі, якая выкарыстоўваецца для адаптыўнага прастору і выраўноўвання кантэнту ў сістэме сеткі Bootstrap.

На гэтай старонцы

Як яны працуюць

Жолабы - гэта прамежкі паміж змесцівам слупка, створаныя гарызантальнымі padding. Мы ўсталёўваем padding-rightі padding-leftдля кожнага слупка і выкарыстоўваем адмоўнае marginдля зрушэння ў пачатку і ў канцы кожнага радка, каб выраўнаваць змесціва.
Шырыня жолабаў пачынаецца з 1.5rem( 24px). Гэта дазваляе нам супаставіць нашу сетку са шкалой запаўнення і пракладак палёў .
Вадасцёкавыя жолабы можна адаптаваць. Выкарыстоўвайце спецыфічныя для пункту перапынку класы жолабаў, каб змяніць гарызантальныя жолабы, вертыкальныя жолабы і ўсе жолабы.

Гарызантальныя жолабы

.gx-*класы могуць выкарыстоўвацца для кантролю гарызантальнай шырыні жолабаў. Бацькоўскі .containerабо .container-fluidможа спатрэбіцца адрэгуляваць, калі таксама выкарыстоўваюцца большыя жолабы, каб пазбегнуць непажаданага перапаўнення, выкарыстоўваючы адпаведную ўтыліту для пракладкі. Напрыклад, у наступным прыкладзе мы павялічылі абіўку з дапамогай .px-4:

Карыстальніцкае запаўненне слупкоў

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>

Альтэрнатыўнае рашэнне - дадаць абалонку вакол .rowкласа .overflow-hidden:

Карыстальніцкае запаўненне слупкоў

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>

Вертыкальныя жолабы

.gy-*класы могуць быць выкарыстаны для кіравання шырынёй вертыкальных канаў у радку, калі слупкі пераходзяць на новыя радкі. Як і гарызантальныя жолабы, вертыкальныя жолабы могуць выклікаць невялікае перапаўненне ніжэй .rowу канцы старонкі. Калі гэта адбываецца, вы дадаеце абалонку .rowз .overflow-hiddenкласам:

Карыстальніцкае запаўненне слупкоў

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>

Гарызантальныя і вертыкальныя жолабы

.g-*класы могуць быць выкарыстаны для кантролю гарызантальнай шырыні жолабаў, у наступным прыкладзе мы выкарыстоўваем меншую шырыню жолабаў, так што не будзе неабходнасці дадаваць .overflow-hiddenклас-абгортку.

Карыстальніцкае запаўненне слупкоў

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>

Шэраг калон жолабаў

Класы Gutter таксама могуць быць дададзены ў слупкі радкоў . У наступным прыкладзе мы выкарыстоўваем адаптыўныя слупкі радкоў і адаптыўныя класы канструкцыі.

Слупок радкоў

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>

Няма жолабаў

Жолабы паміж слупкамі ў нашых прадвызначаных класах сеткі можна выдаліць з дапамогай .g-0. Гэта выдаляе адмоўныя margins .rowі гарызанталь paddingз усіх непасрэдных даччыных слупкоў.

Патрэбен дызайн ад краю да краю? Адпусціце бацькоўскі .containerабо .container-fluidі дадайце .mx-0ў, .rowкаб прадухіліць перапаўненне.

На практыцы гэта выглядае вось як. Звярніце ўвагу, што вы можаце працягваць выкарыстоўваць гэта з усімі іншымі загадзя вызначанымі класамі сеткі (уключаючы шырыню слупкоў, адаптыўныя ўзроўні, змены парадку і многае іншае).

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

Памяняйце жолабы

Класы пабудаваны з $guttersкарты Sass, якая атрымала ў спадчыну ад $spacersкарты Sass.

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