對bootstrap框架有一定了解的朋友都知道，一般頁面布局中的開頭會使用到container或container-fluid類，那么它們有什么區別呢？不急！下面為您講解。
我們先來看看官方對這兩個類是怎么說的：
.container 類用於固定寬度並支持響應式布局的容器。
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
實例測試：
<!DOCTYPE html> <html> <head> <title>響應式布局容器 - container和container-fluid</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="background-color: red;"> <div>container類</div> </div> <div class="container-fluid" style="background-color: blue;"> <div>container-fluid類</div> </div> </body> </html>
效果圖：
二者之間的共同點為，兩者都可以將高度設置成auto，即自動模式。最大的不同就是寬度的設定上。
container根據屏幕寬度利用媒體查詢，已經設定了固定的寬度，作用為階段性的改變寬度，所以在改變瀏覽器的大小時，頁面是一個階段一個階段變化的。
container-fluid則是將寬度設定為auto，所以當縮放瀏覽器時，它會保持全屏大小，始終保持100%的寬度。
總結：
1)container類出現內邊距和外邊距，.container-fluid類沒有。
2)container類左右內邊距一直是15px，屏幕小於等於767px的時候沒有margin值，屏幕大於767px開始有左右margin值，屏幕寬度為768px和1000px的時候，margin值相對最小，分別是9px和15px，其他時候margin值隨着屏幕的增大而增大。.container-fluid類寬度不管屏幕寬度大小，一直是100%。