Улуци

Улуците са подложката между вашите колони, използвани за отзивчиво пространство и подравняване на съдържание в мрежовата система Bootstrap.

На тази страница

Как работят

Улуците са празнините между съдържанието на колоните, създадени от horizontal padding. Задаваме padding-rightи padding-leftна всяка колона и използваме отрицателно margin, за да компенсираме това в началото и края на всеки ред, за да подравним съдържанието.
Улуците започват от 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. Това премахва отрицателните margins от .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>

Сменете улуците

Класовете са изградени от $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,
);