Υδρορροές

Οι υδρορροές είναι η επένδυση μεταξύ των στηλών σας, που χρησιμοποιούνται για την απόκριση χώρου και ευθυγράμμιση περιεχομένου στο σύστημα πλέγματος Bootstrap.

Σε αυτήν την σελίδα

Πώς λειτουργούν

Οι υδρορροές είναι τα κενά μεταξύ του περιεχομένου στηλών, που δημιουργούνται από οριζόντια padding. Ορίζουμε padding-rightκαι padding-leftσε κάθε στήλη και χρησιμοποιούμε αρνητικό marginγια να το αντισταθμίσουμε στην αρχή και στο τέλος κάθε σειράς για να ευθυγραμμίσουμε το περιεχόμενο.
Οι υδρορροές ξεκινούν από 1.5rem( 24px) πλάτος. Αυτό μας επιτρέπει να ταιριάξουμε το πλέγμα μας με την κλίμακα γεμισμάτων και διαχωριστών περιθωρίου .
Οι υδρορροές μπορούν να ρυθμιστούν με απόκριση. Χρησιμοποιήστε κατηγορίες υδρορροών για συγκεκριμένα σημεία διακοπής για να τροποποιήσετε οριζόντιες υδρορροές, κάθετες υδρορροές και όλες τις υδρορροές.

Οριζόντιες υδρορροές

.gx-*Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των οριζόντιων πλατών υδρορροών. Το .containerή ο .container-fluidγονέας μπορεί να χρειαστεί προσαρμογή εάν χρησιμοποιούνται και μεγαλύτερες υδρορροές για να αποφευχθεί η ανεπιθύμητη υπερχείλιση, χρησιμοποιώντας ένα αντίστοιχο βοηθητικό πρόγραμμα επένδυσης. Για παράδειγμα, στο παρακάτω παράδειγμα έχουμε αυξήσει το padding με .px-4:

Προσαρμοσμένη επένδυση στηλών

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>

Μια εναλλακτική λύση είναι να προσθέσετε ένα περιτύλιγμα γύρω .rowαπό την .overflow-hiddenκατηγορία:

Προσαρμοσμένη επένδυση στηλών

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>

Κάθετες υδρορροές

.gy-*Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των κατακόρυφων πλάτη υδρορροών μέσα σε μια σειρά όταν οι στήλες τυλίγονται σε νέες γραμμές. Όπως οι οριζόντιες υδρορροές, οι κάθετες υδρορροές μπορούν να προκαλέσουν κάποια υπερχείλιση κάτω από το .rowστο τέλος μιας σελίδας. Εάν συμβεί αυτό, προσθέτετε ένα περιτύλιγμα .rowμε την .overflow-hiddenκλάση:

Προσαρμοσμένη επένδυση στηλών

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>

Οριζόντιες & κάθετες υδρορροές

.g-*Οι κλάσεις μπορούν να χρησιμοποιηθούν για τον έλεγχο των οριζόντιων πλατών υδρορροής, για το ακόλουθο παράδειγμα χρησιμοποιούμε μικρότερο πλάτος υδρορροής, επομένως δεν θα χρειαστεί να προσθέσουμε την .overflow-hiddenκατηγορία περιτυλίγματος.

Προσαρμοσμένη επένδυση στηλών

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>

Σειρά κολώνες υδρορροές

Οι τάξεις υδρορροής μπορούν επίσης να προστεθούν σε στήλες σειρών . Στο παρακάτω παράδειγμα, χρησιμοποιούμε αποκριτικές στήλες σειρών και αποκριτικές κλάσεις υδρορροής.

Στήλη γραμμής

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>

Χωρίς υδρορροές

Οι υδρορροές μεταξύ στηλών στις προκαθορισμένες κατηγορίες πλέγματος μπορούν να αφαιρεθούν με .g-0. Αυτό αφαιρεί το αρνητικό margins από .rowκαι το οριζόντιο paddingαπό όλες τις στήλες των άμεσων παιδιών.

Χρειάζεστε σχέδιο από άκρη σε άκρη; Ρίξτε το γονικό .containerή .container-fluidκαι προσθέστε .mx-0το στο .rowγια να αποτρέψετε την υπερχείλιση.

Στην πράξη, εδώ είναι πώς φαίνεται. Σημειώστε ότι μπορείτε να συνεχίσετε να το χρησιμοποιείτε με όλες τις άλλες προκαθορισμένες κατηγορίες πλέγματος (συμπεριλαμβανομένων των πλατών στηλών, των αποκρινόμενων επιπέδων, των αναπαραγγελιών και άλλων).

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

Αλλάξτε τις υδρορροές

Οι τάξεις δημιουργούνται από τον $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,
);