一、背景介紹
Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
今天分享的知識點(diǎn)：
*柵格系統(tǒng)實(shí)現(xiàn)原理
*container/row/col之間的關(guān)系
*自定義列
*用媒體查詢實(shí)現(xiàn)響應(yīng)式布局
二、知識剖析
（一）柵格布局實(shí)現(xiàn)原理
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
?你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
（二）container/row/col之間的關(guān)系? ??
.container類用于固定寬度并支持響應(yīng)式布局的容器;
.row和.col類配合用于為其賦予合適的排列和內(nèi)補(bǔ);
container有左右padding15px;
row有左右-15px margin
col有左右15px?
(三)自定義列
（四）媒體查詢
6.擴(kuò)展思考
為什么要設(shè)置container/row/col的padding和margin值？
答：為了確保嵌套時(shí)的col可以有15px的padding。
7.參考文獻(xiàn)
? ? ? ? ? ?
https://v3.bootcss.com/css/#grid? ? ? ? ? ?
https://www.tuicool.com/articles/Afuu2q/
8.更多討論
1. 自定義列之后還有padding和margin嗎？
答：沒有需要自己設(shè)置。
2.媒體查詢與響應(yīng)式布局的關(guān)系？
媒體查詢是實(shí)現(xiàn)響應(yīng)式布局的方式之一。
3.嵌套為什么不用使用container類了？
答：嵌套行的原理就像上面一樣，只是它的重疊住了列的padding?，其實(shí)就把外面的列當(dāng)作?container?了，本質(zhì)上列扮演了?container?的角色，所以嵌套行時(shí)你不再需要?container
