Στοίβες
Βοηθοί συντομογραφίας που βασίζονται στα βοηθητικά προγράμματα flexbox για να κάνουν τη διάταξη εξαρτημάτων πιο γρήγορη και ευκολότερη από ποτέ.
Οι στοίβες προσφέρουν μια συντόμευση για την εφαρμογή ορισμένων ιδιοτήτων flexbox για γρήγορη και εύκολη δημιουργία διατάξεων στο Bootstrap. Όλα τα εύσημα για την ιδέα και την υλοποίηση πάνε στο έργο ανοιχτού κώδικα Pylon .
Κατακόρυφος
Χρησιμοποιήστε .vstack
το για να δημιουργήσετε κάθετες διατάξεις. Τα στοιβαγμένα στοιχεία είναι από προεπιλογή πλήρους πλάτους. Χρησιμοποιήστε .gap-*
βοηθητικά προγράμματα για να προσθέσετε χώρο μεταξύ των στοιχείων.
<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-*
βοηθητικά προγράμματα για να προσθέσετε χώρο μεταξύ των στοιχείων.
<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
ως διαχωριστές:
<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>
Και με κάθετους κανόνες :
<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
το για στοίβαξη κουμπιών και άλλων στοιχείων:
<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
:
<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;
}