Υδρορροές
Οι υδρορροές είναι η επένδυση μεταξύ των στηλών σας, που χρησιμοποιούνται για την απόκριση χώρου και ευθυγράμμιση περιεχομένου στο σύστημα πλέγματος Bootstrap.
Πώς λειτουργούν
-
Οι υδρορροές είναι τα κενά μεταξύ του περιεχομένου στηλών, που δημιουργούνται από οριζόντια
padding
. Ορίζουμεpadding-right
καιpadding-left
σε κάθε στήλη και χρησιμοποιούμε αρνητικόmargin
για να το αντισταθμίσουμε στην αρχή και στο τέλος κάθε σειράς για να ευθυγραμμίσουμε το περιεχόμενο. -
Οι υδρορροές ξεκινούν από
1.5rem
(24px
) πλάτος. Αυτό μας επιτρέπει να ταιριάξουμε το πλέγμα μας με την κλίμακα γεμισμάτων και διαχωριστών περιθωρίου . -
Οι υδρορροές μπορούν να ρυθμιστούν με απόκριση. Χρησιμοποιήστε κατηγορίες υδρορροών για συγκεκριμένα σημεία διακοπής για να τροποποιήσετε οριζόντιες υδρορροές, κάθετες υδρορροές και όλες τις υδρορροές.
Οριζόντιες υδρορροές
.gx-*
Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των οριζόντιων πλατών υδρορροών. Το .container
ή ο .container-fluid
γονέας μπορεί να χρειαστεί προσαρμογή εάν χρησιμοποιούνται και μεγαλύτερες υδρορροές για να αποφευχθεί η ανεπιθύμητη υπερχείλιση, χρησιμοποιώντας ένα αντίστοιχο βοηθητικό πρόγραμμα επένδυσης. Για παράδειγμα, στο παρακάτω παράδειγμα έχουμε αυξήσει το padding με .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>
Μια εναλλακτική λύση είναι να προσθέσετε ένα περιτύλιγμα γύρω .row
από την .overflow-hidden
κατηγορία:
<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>
Κάθετες υδρορροές
.gy-*
Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των κατακόρυφων πλάτη της υδρορροής. Όπως οι οριζόντιες υδρορροές, οι κάθετες υδρορροές μπορούν να προκαλέσουν κάποια υπερχείλιση κάτω από το .row
στο τέλος μιας σελίδας. Εάν συμβεί αυτό, προσθέτετε ένα περιτύλιγμα .row
με την .overflow-hidden
κλάση:
<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>
Οριζόντιες & κάθετες υδρορροές
.g-*
Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των οριζόντιων πλατών υδρορροής, για το ακόλουθο παράδειγμα χρησιμοποιούμε μικρότερο πλάτος υδρορροής, επομένως δεν θα χρειαστεί να προσθέσουμε την .overflow-hidden
κατηγορία περιτυλίγματος.
<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>
Σειρά κολώνες υδρορροές
Οι τάξεις υδρορροής μπορούν επίσης να προστεθούν σε στήλες σειρών . Στο παρακάτω παράδειγμα, χρησιμοποιούμε αποκριτικές στήλες σειρών και αποκριτικές κλάσεις υδρορροής.
<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>
Χωρίς υδρορροές
Οι υδρορροές μεταξύ στηλών στις προκαθορισμένες κατηγορίες πλέγματος μπορούν να αφαιρεθούν με .g-0
. Αυτό αφαιρεί το αρνητικό margin
s από .row
και το οριζόντιο padding
από όλες τις στήλες των άμεσων παιδιών.
Χρειάζεστε σχέδιο από άκρη σε άκρη; Ρίξτε τον γονέα .container
ή .container-fluid
.
Στην πράξη, εδώ είναι πώς φαίνεται. Σημειώστε ότι μπορείτε να συνεχίσετε να το χρησιμοποιείτε με όλες τις άλλες προκαθορισμένες κατηγορίες πλέγματος (συμπεριλαμβανομένων των πλατών στηλών, των αποκρινόμενων επιπέδων, των αναπαραγγελιών και άλλων).
<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>
Αλλάξτε τις υδρορροές
Οι τάξεις δημιουργούνται από τον $gutters
χάρτη Sass που κληρονομείται από τον $spacers
χάρτη Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);