堆叠
建立在flexbox实用程序之上的速记助手,使组件布局比以往任何时候都更快、更容易。更新于: 2023-04-30 14:28:21 查看: 410
发布于: 2021-9-10 19:18 发布者: 大米
堆栈提供了一种快捷方式,可以应用许多flexbox属性在引导中快速轻松地创建布局。
垂直
使用.vstack
文件创建垂直布局。默认情况下,项目为全宽堆叠。使用.gap-*
在项目之间添加空间的实用程序。
First item
Second item
Third item
<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-*
在项目之间添加空间的实用程序。
First item
Second item
Third item
<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
作为垫片:
First item
Second item
Third item
<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>
和垂直规则:
First item
Second item
Third item
<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>
扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。