如何使用bootstrap栅格布局？

一、背景介绍

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

今天分享的知识点：

*栅格系统实现原理

*container/row/col之间的关系

*自定义列

*用媒体查询实现响应式布局

二、知识剖析

（一）栅格布局实现原理

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

（二）container/row/col之间的关系    

.container类用于固定宽度并支持响应式布局的容器;

.row和.col类配合用于为其赋予合适的排列和内补;

container有左右padding15px;

row有左右-15px margin

col有左右15px 

(三)自定义列

（四）媒体查询

6.扩展思考

为什么要设置container/row/col的padding和margin值？

答：为了确保嵌套时的col可以有15px的padding。

7.参考文献

https://v3.bootcss.com/css/#grid           

https://www.tuicool.com/articles/Afuu2q/

8.更多讨论

1. 自定义列之后还有padding和margin吗？

答：没有需要自己设置。

2.媒体查询与响应式布局的关系？

媒体查询是实现响应式布局的方式之一。

3.嵌套为什么不用使用container类了？

答：嵌套行的原理就像上面一样，只是它的重叠住了列的padding ，其实就把外面的列当作 container 了，本质上列扮演了 container 的角色，所以嵌套行时你不再需要 container