Δίκτυο Bootstrap 5: Από πυκνό σε επίπεδο

Παράδειγμα δίχασμα: Επίπεδο επίπεδο

Δημιουργούμε ένα βασικό σύστημα δίχασμα, το οποίο ξεκινάει ως πυκνό σε υπερβολικά μικρά συσκευές και στη συνέχεια γίνεται οριζόντιο σε μεγαλύτερες συσκευές.

Το παρακάτω παράδειγμα δείχνει μια απλή διαρρύθμιση δύο στήλων "επίπεδο επίπεδο",这意味着它会在所有屏幕上产生 50%/50% 的拆分，除了超小型屏幕，它会自动堆叠 (100%)：

Παράδειγμα: Επίπεδο επίπεδο

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Στήλη 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Στήλη 2 ...</p>
    </div>
  </div>
</div>

Δοκιμάστε το προσωπικά

Συμβουλή:.col-sm-* Ο αριθμός στην κλάση υποδεικνύει πόσες στηλές πρέπει να διασχίσει το div (12 στηλές συνολικά). Επομένως,.col-sm-1 περίπου 1 στήλη.col-sm-4 περίπου 4 στηλές.col-sm-6 περίπου 6 στηλές, κ.λπ.

Σημείωση:Βεβαιωθείτε ότι η σύνολο είναι ίσο ή μικρότερο από 12 (δεν απαιτείται η χρήση όλων των 12 διαθέσιμων στηλών):

Συμβουλή:αποστέλλοντας .container-fluid κλάση σε .containerΜπορείτε να μετατρέψετε οποιαδήποτε full-width διατάξη μετατρέπεται σε fixed-width Η αντανακλαστική διάταξη:

Παράδειγμα: Επικαλέσθηση αντανακλαστικής δομής

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Στήλη 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Στήλη 2 ...</p>
    </div>
  </div>
</div>

Δοκιμάστε το προσωπικά

Αυτόματη διάταξη στηλών

Στο Bootstrap 5, υπάρχει ένας απλός τρόπος για τη δημιουργία ίσων πλάτων στηλών για όλες τις συσκευές: απλά από .col-size-* Αφαιρέστε τον αριθμό και χρησιμοποιήστε μόνο στο στοιχείο col .col-size Κλάση. Το Bootstrap αναγνωρίζει πόσες στήλες υπάρχουν και κάθε στήλη θα λάβει το ίδιο πλάτος. Οι κλάσεις μεγέθους (sm, md κ.λπ.) καθορίζουν πότε πρέπει να είναι αντανακλαστικές:

<!-- Δύο στήλη: 50% πλάτος σε όλες τις οθόνες, εκτός από τα υπερμικρά συσκευές (100% πλάτος) -->
<div class="row">
  <div class="col-sm">1 από 2</div>
  <div class="col-sm">2 από 2</div>
</div>
<!-- Τέσσερα στήλη: 25% πλάτος σε όλες τις οθόνες, εκτός από τα υπερμικρά συσκευές (100% πλάτος) -->
<div class="row">
  <div class="col-sm">1 από 4</div>
  <div class="col-sm">2 από 4</div>
  <div class="col-sm">3 από 4</div>
  <div class="col-sm">4 από 4</div>
</div>

Δοκιμάστε το προσωπικά