Bootstrap弹性页面布局
所谓的弹性布局就是适应多款浏览器
不同的宽度布局的显示相对来说占的百分比是一样的
甚至宽度不足时还会自动换行剩余元素等分空间
使得页面布局在不同的浏览器中显示不混乱
在这里我要讲的是利用bootstrap插件进行弹性布局
Bootstrap布局是给元素添加封装好样式的类名
弹性布局第一步布局是给最外层的元素添加类名container-fluid
container-fluid自带的样式如下图
它是一个宽度是100%也就是整个页面的一个盒子
并且自带左右内边距各15px
接着第二层的元素添加类名row和justify-content-around
row和justify-content-around自带样式如下图
row自带的样式display：flex既是弹性布局的标志又是弹性布局的开始
没有display：flex这样式其他的所有弹性样式设置了都没效果
有了display：flex后row自带的样式flex-wrap：wrap就有效果了
flex-wrap：wrap是自动换行的意思
flex-wrap是个组合属性flex-wrap后第一个输入代表是元素的排序方向第二个是是否换行
第一个不输入就默认按主轴方向排序元素
row这个类自带样式就是默认按主轴方向排序并且多余换行
justify-content-around自带样式justify-content：space-around！important
意思是子元素左右等分剩余空间，等分空间的布局让人看起来比较舒适美观
justify-content：space-around要与display：flex同时设置，上面也说到了display：flex是弹性布局的标志没有display：flex样式justify-content：space-around样式就没有效果
同时justify-content：space-around样式是设置在父级元素上控制第一层子元素的
所以justify-content：space-around要与display：flex同时设置
也就是类名row和类名justify-content-around要添加在同一个元素上
下面就给你看一下那代码图
container-fluid和row两个类连着使用的代表意义是
在一个盒子里按每行的方式进行布局
container-fluid代表的是一个盒子
row代表的是盒子里的行
要想在一行中放多少个元素
就在带有row的元素里进行多少个元素的布局
要想加多一行布局就在container-fluid里加多一个row
这样的弹性布局不仅可以适应不同浏览器还可以适应手机端
如下手机端布局图