Стеки
Компактные помощники, которые построены на основе наших утилит flexbox, для создания быстрой и простой компоновки компонентов.
Для быстрого и легкого создания макетов в Bootstrap с применением ряда свойств flexbox используйте ярлык стеков. Заслуга в разработке концепции и реализации проекта полностью принадлежит проекту Pylon.
Вертикальный
Используйте .vstack для создания вертикальных макетов. По умолчанию сложенные элементы имеют полную ширину. Используйте утилиты .gap-* для добавления пробелов между элементами.
<divclass="vstack gap-3"><divclass="p-2">Первый элемент</div><divclass="p-2">Второй элемент</div><divclass="p-2">Третий элемент</div></div>Горизонтальный
Используйте .hstack для горизонтальных макетов. Сложенные элементы по умолчанию центрируются по вертикали и занимают только необходимую ширину. Используйте утилиты .gap-* для добавления пробелов между элементами.
<divclass="hstack gap-3"><divclass="p-2">Первый элемент</div><divclass="p-2">Второй элемент</div><divclass="p-2">Третий элемент</div></div>Использование утилит с горизонтальным полем, таких как .ms-auto в качестве разделителей:
<divclass="hstack gap-3"><divclass="p-2">Первый элемент</div><divclass="p-2 ms-auto">Второй элемент</div><divclass="p-2">Третий элемент</div></div><divclass="hstack gap-3"><divclass="p-2">Первый элемент</div><divclass="p-2 ms-auto">Второй элемент</div><divclass="vr"></div><divclass="p-2">Третий элемент</div></div>Примеры
Используйте .vstack, чтобы складывать кнопки и другие элементы:
<divclass="vstack gap-2 col-md-5 mx-auto"><buttontype="button"class="btn btn-secondary">Сохранить изменения</button><buttontype="button"class="btn btn-outline-secondary">Отменить</button></div>Создайте встроенную форму с помощью .hstack:
<divclass="hstack gap-3"><inputclass="form-control me-auto"type="text"placeholder="Добавьте свой элемент сюда..."aria-label="Добавьте свой элемент сюда..."><buttontype="button"class="btn btn-secondary">Отправить</button><divclass="vr"></div><buttontype="button"class="btn btn-outline-danger">Сбросить</button></div>CSS
.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch;}.vstack{display:flex;flex:11auto;flex-direction:column;align-self:stretch;}