Олуци

Олуците се поставата помеѓу вашите колони, кои се користат за одговорно простор и усогласување на содржината во мрежниот систем Bootstrap.

На оваа страница

Како тие работат

Олуците се празнините помеѓу содржината на колоните, создадени од хоризонтална 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,
);