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

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

上一篇：BootstrapVue的使用《关于Bootstrap工具样式-----display相关》

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

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

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

  <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，如下

  <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的情况下才生效

  .{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不支持
  

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

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

下一篇：BootstrapVue的使用《关于Bootstrap常用组件-----提示组件》