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分别代表marginpaddingsides的可选值有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.25rem2对应0.5rem3对应1rem4对应1.5rem5对应3rem
    auto是在utilities文件夹下的_spacing.scss中直接定义的,automargin独有的,padding不支持
    在这里插入图片描述

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值