BootstrapVue的使用《关于Bootstrap工具样式-----边距相关》

Bootstrap官方出品：BootstrapVue去官网看看吧

关于工具样式，官方文档（快速通道）

关于边距，官方文档（快速通道）常用工具样式举例（Bootstrap版本>=v4）

• margin外边距：
  第一个子div距离上右外边距均为0.25rem，如下

  1 2 3 4 5

  <div class="d-flex flex-row"> <div class="m-0 mt-1 mr-1">Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

• padding内边距：
  第一个子div距离左下内边距均为0.25rem，如下

  1 2 3 4 5

  <div class="d-flex flex-row"> <div class="p-0 pl-1 pb-1">Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

  用法：property的可选值为m/p分别代表margin和padding，sides的可选值有t/b/l/r/x/y分别代表上/下/左/右/水平/竖直方向，breakpoint的可选值有sm,md,lg,xl，意为在breakpoint的情况下才生效

  1 2	.{property}{sides}-{size} for xs .{property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

  size可选值为0/1/2/3/4/5/auto，在_variables.scss中可以找到，如下图：
  由图可知，0对应无边距，1对应0.25rem，2对应0.5rem，3对应1rem，4对应1.5rem，5对应3rem
  而auto是在utilities文件夹下的_spacing.scss中直接定义的，auto为margin独有的，padding不支持
  

常用的边距相关的样式，暂时写到这了。

关于常用的工具样式，就到此告一段落。想要了解更多的，请查看官方文档（快速通道）

---

• ← Previous Post
• Next Post →

---

---