Rynny

Rynny to wypełnienie między kolumnami, używane do responsywnego rozmieszczania i wyrównywania zawartości w systemie siatki Bootstrap.

Na tej stronie

Jak oni pracują

Rynny to przerwy między zawartością kolumn, utworzone przez poziome padding. Ustawiamy padding-righti padding-leftna każdej kolumnie i używamy wartości ujemnej, marginaby odsunąć ją na początku i na końcu każdego wiersza, aby wyrównać zawartość.
Rynny zaczynają się od 1.5rem( 24px) szerokości. Dzięki temu możemy dopasować naszą siatkę do skali wypełnienia i marginesów dystansowych .
Rynny można elastycznie regulować. Użyj klas rynien specyficznych dla punktów przerwania, aby zmodyfikować rynny poziome, pionowe i wszystkie rynny.

Rynny poziome

.gx-*klasy mogą służyć do kontrolowania szerokości rynny poziomej. .containerMoże zaistnieć potrzeba dostosowania strony nadrzędnej, jeśli używane są również .container-fluidwiększe rynny, aby uniknąć niepożądanego przepełnienia, za pomocą dopasowanego narzędzia do wypełniania. Na przykład w poniższym przykładzie zwiększyliśmy dopełnienie za pomocą .px-4:

Niestandardowe wypełnienie kolumn

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>

Alternatywnym rozwiązaniem jest dodanie wrappera .rowz .overflow-hiddenklasą:

Niestandardowe wypełnienie kolumn

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>

Rynny pionowe

.gy-*klasy mogą służyć do kontrolowania szerokości pionowej rynny w wierszu, gdy kolumny są zawijane do nowych wierszy. Podobnie jak rynny poziome, rynny pionowe mogą powodować przepełnienie poniżej .rowkońca strony. Jeśli tak się stanie, dodajesz opakowanie .rowz .overflow-hiddenklasą:

Niestandardowe wypełnienie kolumn

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>

Rynny poziome i pionowe

.g-*klasy mogą być używane do kontrolowania szerokości rynny poziomej, w poniższym przykładzie używamy mniejszej szerokości rynny, więc nie będzie potrzeby dodawania .overflow-hiddenklasy wrappera.

Niestandardowe wypełnienie kolumn

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>

Rynny kolumn rzędowych

Klasy rynien można również dodać do kolumn wierszy . W poniższym przykładzie używamy responsywnych kolumn wierszy i responsywnych klas rynien.

Kolumna wiersza

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>

Brak rynien

Rynny między kolumnami w naszych predefiniowanych klasach siatki można usunąć za pomocą .g-0. Spowoduje to usunięcie ujemnych margins .rowi poziomych paddingze wszystkich najbliższych kolumn podrzędnych.

Potrzebujesz projektu od krawędzi do krawędzi? Upuść rodzica .containerlub .container-fluidi dodaj .mx-0do, .rowaby zapobiec przepełnieniu.

W praktyce tak to wygląda. Pamiętaj, że możesz nadal używać tego ze wszystkimi innymi predefiniowanymi klasami siatki (w tym szerokościami kolumn, warstwami responsywnymi, zmianą kolejności i nie tylko).

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

Zmień rynny

Klasy są budowane na podstawie $guttersmapy Sass, która jest dziedziczona z $spacersmapy Sass.

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