in English

Στοίβες

Βοηθοί συντομογραφίας που βασίζονται στα βοηθητικά προγράμματα flexbox για να κάνουν τη διάταξη εξαρτημάτων πιο γρήγορη και ευκολότερη από ποτέ.

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

Οι στοίβες προσφέρουν μια συντόμευση για την εφαρμογή ορισμένων ιδιοτήτων flexbox για γρήγορη και εύκολη δημιουργία διατάξεων στο Bootstrap. Όλα τα εύσημα για την ιδέα και την υλοποίηση πάνε στο έργο ανοιχτού κώδικα Pylon .

Ψηλά το κεφάλι! Πρόσφατα προστέθηκε υποστήριξη για βοηθητικά προγράμματα gap με το flexbox στο Safari, επομένως εξετάστε το ενδεχόμενο να επαληθεύσετε την υποστήριξη του προγράμματος περιήγησής σας. Η διάταξη πλέγματος δεν πρέπει να έχει προβλήματα. Διαβάστε περισσότερα .

Κατακόρυφος

Χρησιμοποιήστε .vstackτο για να δημιουργήσετε κάθετες διατάξεις. Τα στοιβαγμένα στοιχεία έχουν πλήρες πλάτος από προεπιλογή. Χρησιμοποιήστε .gap-*βοηθητικά προγράμματα για να προσθέσετε χώρο μεταξύ των στοιχείων.

Πρώτο στοιχείο

Δεύτερο στοιχείο

Τρίτο στοιχείο

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Οριζόντιος

Χρήση .hstackγια οριζόντιες διατάξεις. Τα στοιβαγμένα στοιχεία είναι κατακόρυφα κεντραρισμένα από προεπιλογή και καταλαμβάνουν μόνο το απαραίτητο πλάτος τους. Χρησιμοποιήστε .gap-*βοηθητικά προγράμματα για να προσθέσετε χώρο μεταξύ των στοιχείων.

Πρώτο στοιχείο

Δεύτερο στοιχείο

Τρίτο στοιχείο

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Χρήση βοηθητικών προγραμμάτων οριζόντιου περιθωρίου όπως .ms-autoως διαχωριστές:

Πρώτο στοιχείο

Δεύτερο στοιχείο

Τρίτο στοιχείο

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Και με κάθετους κανόνες :

Πρώτο στοιχείο

Δεύτερο στοιχείο

Τρίτο στοιχείο

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

Παραδείγματα

Χρησιμοποιήστε .vstackγια στοίβαξη κουμπιών και άλλων στοιχείων:

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Δημιουργήστε μια ενσωματωμένη φόρμα με .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Sass

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}