Jgheaburi

Jgheaburile sunt umplutura dintre coloanele dvs., utilizate pentru a spaționa și alinia conținutul în sistemul de grilă Bootstrap.

Pe aceasta pagina

Cum funcționează

Jgheaburile sunt golurile dintre conținutul coloanei, create de orizontale padding. Setăm padding-rightși padding-leftpe fiecare coloană și folosim negativul marginpentru a le compensa la începutul și la sfârșitul fiecărui rând pentru a alinia conținutul.
Jgheaburile încep la 1.5rem( 24px) lățime. Acest lucru ne permite să ne potrivim grila la scara de umplutură și a distanțierilor de marjă .
Jgheaburile pot fi reglate în mod receptiv. Utilizați clase de jgheaburi specifice punctului de întrerupere pentru a modifica jgheaburi orizontale, jgheaburi verticale și toate jgheaburile.

Jgheaburi orizontale

.gx-*clasele pot fi folosite pentru a controla lățimile orizontale ale jgheaburilor. S- .containerar .container-fluidputea să fie nevoie să se ajusteze dacă se folosesc jgheaburi mai mari pentru a evita debordarea nedorită, folosind un utilitar de umplutură potrivit. De exemplu, în exemplul următor am mărit umplutura cu .px-4:

Umplutură personalizată a coloanei

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

O soluție alternativă este adăugarea unui wrapper în jurul .rowclasei .overflow-hidden:

Umplutură personalizată a coloanei

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

Jgheaburi verticale

.gy-*clasele pot fi folosite pentru a controla lățimile jgheaburilor verticale. Asemenea jgheaburilor orizontale, jgheaburile verticale pot provoca o revărsare mai jos de .rowla sfârșitul unei pagini. Dacă se întâmplă acest lucru, adăugați un wrapper în jurul .rowclasei .overflow-hidden:

Umplutură personalizată a coloanei

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

Jgheaburi orizontale și verticale

.g-*clasele pot fi folosite pentru a controla lățimile orizontale ale jgheabului, pentru exemplul următor folosim o lățime mai mică a jgheabului, astfel încât nu va fi nevoie să adăugați .overflow-hiddenclasa wrapper.

Umplutură personalizată a coloanei

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

Rând coloane jgheaburi

Clasele de jgheab pot fi adăugate și la coloanele de rând . În exemplul următor, folosim coloane de rânduri receptive și clase de canale receptive.

Coloana de rând

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

Fără jgheaburi

Jgheaburile dintre coloane din clasele noastre de grile predefinite pot fi eliminate cu .g-0. Acest lucru elimină surile negative margindin .rowși orizontalul paddingdin toate coloanele secundare imediate.

Ai nevoie de un design de la margine la margine? Aruncă părintele .containersau .container-fluid.

În practică, iată cum arată. Rețineți că puteți continua să utilizați acest lucru cu toate celelalte clase de grilă predefinite (inclusiv lățimi de coloane, niveluri receptive, reordonări și multe altele).

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

Schimbați jgheaburile

Clasele sunt construite din $guttersharta Sass care este moștenită din $spacersharta Sass.

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