1.添加栅格和倆列的设置,大致html如下
text-center是使文本水平居中显示
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL5lkaNVzY65UeRpHW4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL0MTN2EzNyUTMxMTNwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
设置图片的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代码: