Rynny
Rynny to wypełnienie między kolumnami, używane do responsywnego rozmieszczania i wyrównywania zawartości w systemie siatki Bootstrap.
Jak oni pracują
-
Rynny to przerwy między zawartością kolumn, utworzone przez poziome
padding
. Ustawiamypadding-right
ipadding-left
na każdej kolumnie i używamy wartości ujemnej,margin
aby 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. .container
Może zaistnieć potrzeba dostosowania strony nadrzędnej, jeśli używane są również .container-fluid
wię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
:
<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>
Alternatywnym rozwiązaniem jest dodanie wrappera .row
z .overflow-hidden
klasą:
<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>
Rynny pionowe
.gy-*
klasy mogą służyć do kontrolowania szerokości rynien pionowych. Podobnie jak rynny poziome, rynny pionowe mogą powodować przepełnienie poniżej .row
końca strony. Jeśli tak się stanie, dodajesz opakowanie .row
z .overflow-hidden
klasą:
<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>
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-hidden
klasy wrappera.
<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>
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.
<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>
Brak rynien
Rynny między kolumnami w naszych predefiniowanych klasach siatki można usunąć za pomocą .g-0
. Spowoduje to usunięcie ujemnych margin
s .row
i poziomych padding
ze wszystkich najbliższych kolumn podrzędnych.
Potrzebujesz projektu od krawędzi do krawędzi? Usuń rodzica .container
lub .container-fluid
.
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).
<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>
Zmień rynny
Klasy są budowane na podstawie $gutters
mapy Sass, która jest dziedziczona z $spacers
mapy Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);