Стектер
Компоненттердин жайгашуусун мурдагыдан да тез жана оңой кылуу үчүн биздин flexbox утилиталарыбыздын үстүнө курулган стенографиялык жардамчылар.
Stacks Bootstrap'те макеттерди тез жана оңой түзүү үчүн бир катар flexbox касиеттерин колдонуу үчүн жарлыкты сунуштайт. Концепция жана ишке ашыруу үчүн бардык кредиттер ачык булак 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;
}