Олуци

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

Ред колони олуци

Класите на олук исто така може да се додадат во колоните на редови . Во следниот пример, ние користиме одговорни колони на редови и респонзивни класи на олуци.

Ред колона

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,
);