Oluci

Oluci su ispuna između vaših stupaca, koja se koristi za odgovarajući prostor i poravnavanje sadržaja u Bootstrap rešetkastom sustavu.

Na ovoj stranici

Kako rade

Oluci su praznine između sadržaja stupaca koje stvara horizontalni padding. Postavljamo padding-righti padding-leftna svakom stupcu i koristimo negativno marginza pomak na početku i kraju svakog retka kako bismo poravnali sadržaj.
Oluci počinju od 1.5rem( 24px) širine. To nam omogućuje da našu rešetku uskladimo s ljestvicom odstojnika za ispunu i rubove .
Oluci se mogu podesiti prema potrebi. Upotrijebite klase oluka specifične za prijelomne točke za izmjenu horizontalnih oluka, okomitih oluka i svih oluka.

Horizontalni oluci

.gx-*klase se mogu koristiti za kontrolu horizontalnih širina oluka. Možda će biti potrebno prilagoditi roditelj .containerili ako se koriste i veći oluci kako bi se izbjeglo neželjeno prelijevanje, korištenjem odgovarajućeg uslužnog programa za podstavu. .container-fluidNa primjer, u sljedećem smo primjeru povećali ispunu pomoću .px-4:

Prilagođeno punjenje stupaca

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>

Alternativno rješenje je dodavanje omotača oko klase .rows .overflow-hiddenklasom:

Prilagođeno punjenje stupaca

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>

Vertikalni oluci

.gy-*klase se mogu koristiti za kontrolu okomitih širina međuprostora unutar retka kada se stupci prelamaju u nove retke. Kao i vodoravni oluci, okomiti oluci mogu uzrokovati prelijevanje ispod .rowna kraju stranice. Ako se to dogodi, dodajete omotač .rows .overflow-hiddenklasom:

Prilagođeno punjenje stupaca

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>

Horizontalni i vertikalni oluci

.g-*klase se mogu koristiti za kontrolu horizontalnih širina oluka, za sljedeći primjer koristimo manju širinu oluka, tako da neće biti potrebe za dodavanjem .overflow-hiddenklase omotača.

Prilagođeno punjenje stupaca

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>

Redovi stupovi žlijebovi

Klase oluka također se mogu dodati stupcima retka . U sljedećem primjeru koristimo responzivne stupce redaka i responzivne klase oluka.

Red stupac

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>

Bez oluka

Oluci između stupaca u našim unaprijed definiranim klasama mreže mogu se ukloniti pomoću .g-0. Time se uklanjaju negativni margins .rowi horizontala paddingiz svih neposrednih podređenih stupaca.

Trebate dizajn od ruba do ruba? Ispustite roditelj .containerili .container-fluidi dodajte .mx-0u .rowkako biste spriječili prelijevanje.

U praksi, evo kako to izgleda. Imajte na umu da ovo možete nastaviti koristiti sa svim drugim unaprijed definiranim klasama rešetki (uključujući širine stupaca, responzivne razine, promjene redoslijeda i više).

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

Promijenite oluke

Klase su izgrađene iz $guttersSass mape koja je naslijeđena od $spacersSass mape.

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