Stabler
Stenografi-hjælpere, der bygger oven på vores flexbox-værktøjer for at gøre komponentlayout hurtigere og nemmere end nogensinde.
Stacks tilbyder en genvej til at anvende en række flexbox-egenskaber for hurtigt og nemt at skabe layouts i Bootstrap. Al ære for konceptet og implementeringen går til open source Pylon-projektet .
Lodret
Bruges .vstack
til at oprette lodrette layouts. Stablede elementer er som standard i fuld bredde. Brug .gap-*
hjælpeprogrammer til at tilføje mellemrum mellem elementer.
<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>
Vandret
Bruges .hstack
til vandrette layouts. Stablede emner er som standard lodret centreret og fylder kun deres nødvendige bredde. Brug .gap-*
hjælpeprogrammer til at tilføje mellemrum mellem elementer.
<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>
Brug af vandrette marginværktøjer .ms-auto
som afstandsstykker:
<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>
Og med lodrette regler :
<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>
Eksempler
Bruges .vstack
til at stable knapper og andre elementer:
<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>
Opret en inline formular med .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;
}