近幾天才開始系統的學習bootstrap,但馬上就遇到了一個‘攔路虎’：container和container-fluid到底什么區別。
查了很多資料，看到很多人和我有同樣的疑問，但是下面的回答一般都是一個是響應式一個寬度是百分百，說的好像是那么回事，但是你真的能明白嗎？反正我是不能，於是我就去開始自己寫demo。
‘container ’demo
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello World</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <h3>hello world</h3> </div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>寫完之后打開瀏覽器，f12后發現container容器不止有15px的padding，還有一個會隨着瀏覽器寬度變化而變化的margin，如圖 
上圖的盒模型為我在滿屏時的數值，對瀏覽器進行縮放會有增加或減少的變化，具體請自己試驗，實踐出真知嘛。
container-fluid demo
當把類換成container-fluid之后，你會發現頁面有明顯的變化
，如圖 
再看盒模型 
你會發現這次整個容器就只有固定的15px的padding，並沒有再加margin。
結論 container 類和container-fluid類的區別體現在是否有隨視口寬度改變的margin存在。 container類所謂的自適應也是通過margin的改變來完成，container-fluid類的百分百寬度是指在固有的15px的padding前提下寬度總是當前視口的寬度。