利用Bootstrap在栅格中左侧图片,右侧文字垂直居中

1.添加栅格和倆列的设置,大致html如下
text-center是使文本水平居中显示
在这里插入图片描述
设置图片的CSS:
在这里插入图片描述
2.效果:在这里插入图片描述
3.现在问题是如何使右侧的文字居中:(利用flex布局实现)
①在row中设置:display:flex
②在里面的col-md-6 设置其分别占据一半的width;flex:0 0 50%;
如下图所以:height高度已经搞定在这里插入图片描述
③给其加margin-bottom,margin-top分别置auto;效果:文字已经垂直居中。
在这里插入图片描述
④CSS设置为:(到这里在大于992px已经配置完毕,不过低于992px就有问题)
在这里插入图片描述
⑤在低于992px的时候出现了布局问题:
在这里插入图片描述

**解决:**在低于992px的时候,让col-md-6的width:100%,让其占据整行,然后在row上再加个换行就行了(flex-wrap: wrap; /控制换行/)。
在这里插入图片描述
⑥这样后,bootstrap的响应式就完成了,下面为css代码:
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值