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.
Kako rade
-
Oluci su praznine između sadržaja stupaca koje stvara horizontalni
padding
. Postavljamopadding-right
ipadding-left
na svakom stupcu i koristimo negativnomargin
za 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 .container
ili ako se koriste i veći oluci kako bi se izbjeglo neželjeno prelijevanje, korištenjem odgovarajućeg uslužnog programa za podstavu. .container-fluid
Na primjer, u sljedećem smo primjeru povećali ispunu pomoću .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>
Alternativno rješenje je dodavanje omotača oko klase .row
s .overflow-hidden
klasom:
<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>
Vertikalni oluci
.gy-*
klase se mogu koristiti za kontrolu okomitih širina oluka. Kao i vodoravni oluci, okomiti oluci mogu uzrokovati prelijevanje ispod .row
na kraju stranice. Ako se to dogodi, dodajete omotač .row
s .overflow-hidden
klasom:
<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>
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-hidden
klase omotača.
<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>
Redovi stupovi žlijebovi
Klase oluka također se mogu dodati stupcima retka . U sljedećem primjeru koristimo responzivne stupce redaka i responzivne klase oluka.
<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>
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 margin
s .row
i horizontala padding
iz svih neposrednih podređenih stupaca.
Trebate dizajn od ruba do ruba? Ispustite roditelj .container
ili .container-fluid
.
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).
<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>
Promijenite oluke
Klase su izgrađene iz $gutters
Sass mape koja je naslijeđena od $spacers
Sass mape.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);