bootstrap中的container與container-fluid的用法

使用過bootstrap的同學都知道，其container與container-fluid都是設置文本居中，但兩者還是有很大的區別。

官方給出的解釋是：

.container 類用於固定寬度並支持響應式布局的容器。

.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。

 二者之間的共同點為，兩者都可以將高度設置成auto，即自動模式。最大的不同就是寬度的設定上。

• container根據屏幕寬度利用媒體查詢，已經設定了固定的寬度，作用為階段性的改變寬度，所以在改變瀏覽器的大小時，頁面是一個階段一個階段變化的。

• container-fluid則是將寬度設定為auto，所以當縮放瀏覽器時，它會保持全屏大小，始終保持100%的寬度。

如果比喻的話，container就如一個嵌套的水池，只有當最里面最小的那個池子注滿水后才會溢到下一個更大的池子，而container-fluid則沒有隔斷，倒入多少水，就充滿多少。

還有一點則是使用container時，你會發現在容器外有一個隨着瀏覽器寬度變化而變化的margin，而使用container-fluid則沒有這個margin。而這個margin正是container的作用原理。