Oluci

Oluci su podmetači između vaših kolona, koji se koriste za responzivno raspoređivanje prostora i poravnavanje sadržaja u sistemu Bootstrap mreže.

Na ovoj stranici

Kako rade

Oluci su praznine između sadržaja stupaca, stvorene horizontalnim padding. Postavljamo padding-righti padding-leftna svaku kolonu i koristimo negativ marginda to poništimo na početku i na kraju svakog reda kako bismo poravnali sadržaj.
Oluci počinju od 1.5rem( 24px) širine. Ovo nam omogućava da uskladimo našu mrežu sa skalom odstojnika za popunjavanje i margine .
Oluci se mogu brzo podešavati. Koristite klase oluka specifične za tačku prekida da modificirate horizontalne oluke, vertikalne oluke i sve oluke.

Horizontalni oluci

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

Prilagođeni padding kolone

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 .rowsa .overflow-hiddenklasom:

Prilagođeni padding kolone

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 vertikalnih širina oluka unutar reda kada se stupci prelamaju u nove linije. Kao i horizontalni oluci, vertikalni oluci mogu uzrokovati prelijevanje ispod .rowna kraju stranice. Ako se to dogodi, dodajte omotač oko .rowklase .overflow-hidden:

Prilagođeni padding kolone

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đeni padding kolone

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>

Oluci za kolone redova

Klase oluka se takođe mogu dodati kolonama reda . U sljedećem primjeru koristimo responzivne stupce reda i responzivne gutter klase.

Kolona reda

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>

Nema oluka

Oluci između stupaca u našim predefiniranim mrežnim klasama mogu se ukloniti pomoću .g-0. Ovo uklanja negativne margins .rowi horizontale paddingiz svih neposrednih podređenih stupaca.

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

U praksi, evo kako to izgleda. Imajte na umu da ovo možete nastaviti da koristite sa svim drugim unapred definisanim klasama mreže (uključujući širine kolona, responzivne slojeve, promene redosleda i još mnogo toga).

.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 od $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,
);