bootsrap封装后的弹性盒子布局

在bootsrap4之前都是左对齐布局,由于技术的更新,盒子布局基本能满足巨大部分的布局要求。所以bootsrap4也进行的较大的改版。这里我们主要来演示盒子布局。


  • 首先添加一个row类名,我们可以看到布局默认变为了水平布局。
  • 我们再添加一个flex-colmn属性即可改为垂直布局如下图
  • 以水平布局为列,添加 justify-content-center即可水平居中排列如下图
  • 添加justify-content-center即可右对齐排列如下图
  • 添加 justify-content-between即可均分排列,自动间隙
  • 还有justify-content-start 起始位置(如默认左对齐排列),flex-row-reverse 水平倒序排列
  • 垂直布局align-items-center 即垂直居中,align-items-end 垂直底部排列,align-items-start 垂直顶部排列
  • 更多的属性可见视频教程如下https://www.bilibili.com/video/BV18K411J7qB

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web前端神器

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值