BootStrap4:栅格系统
1、container容器
- container:固定宽度的容器
- container-fluid:响应式容器
2、栅格选项
Bootstrap4 总共有五个栅格等级,每个响应式分界点隔出一个等级
Ps:.row上带有margin-left: -15px;margin-right: -15px;属性,你可以在.row上上定义.no-gutters属性,从而消除这个属性
实例一:等宽布局
<body> <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>
</body>
实例二:等宽多行
<body> <div class="container"><div class="row"><div class="col">Column</div><div class="col">Column</div><!-- 引用.w-100进行切割分行--><div class="w-100"></div><div class="col">Column</div><div class="col">Column</div></div></div>
</body>
3、栅格对齐(垂直对齐)
- align-items-start:垂直居上
- align-items-center:垂直居中
- align-items-center:垂直居下
示例:垂直对齐
样式效果:
源代码:
<body> <div class="container"><div class="row align-items-start "><div class="col">One of three columns</div><div class="col">One of three columns</div><div class="col">One of three columns</div></div><div class="row align-items-center "><div class="col">One of three columns</div><div class="col">One of three columns</div><div class="col">One of three columns</div></div><div class="row align-items-end"><div class="col">One of three columns</div><div class="col">One of three columns</div><div class="col">One of three columns</div></div></div>
</body>
4、栅格对齐(水平对齐)
- justify-content-start:左对齐
- justify-content-center:居中对齐
- justify-content-end:右对齐
样式效果:
源代码:
<div class=“container”><div class="row justify-content-start"><div class="col-4"> One of two columns </div><div class="col-4"> One of two columns </div></div><div class="row justify-content-center"><div class="col-4"> One of two columns </div><div class="col-4"> One of two columns </div></div><div class="row justify-content-end"><div class="col-4"> One of two columns </div><div class="col-4"> One of two columns </div></div><div class="row justify-content-around"><div class="col-4"> One of two columns </div><div class="col-4"> One of two columns </div></div><div class="row justify-content-between"><div class="col-4"> One of two columns </div><div class="col-4"> One of two columns </div></div>
</div>
5、列偏移
使用响应式的.offset-*栅格偏移方法。
样式效果:
参考代码:
<div class=“container”><div class="row"><div class="col-md-4 b">.col-md-4</div><div class="col-md-4 offset-md-4 ">.col-md-4 .offset-md-4</div></div><div class="row"><div class="col-md-3 offset-md-3 ">.col-md-3 .offset-md-3</div><div class="col-md-3 offset-md-3 ">.col-md-3 .offset-md-3</div></div><div class="row"><div class="col-md-6 offset-md-3 ">.col-md-6 .offset-md-3</div></div>
</div>
6、列嵌套
可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
样式效果:
源代码:
<div class=“container”><div class="row"><div class="col-sm-9 ">Level 1: .col-sm-9<div class="row"><div class="col-8 col-sm-6 ">Level 2: .col-8 .col-sm-6</div><div class="col-4 col-sm-6 ">Level 2: .col-4 .col-sm-6</div></div></div></div>
</div>