在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的作用原理。

總結

以上是生活随笔為你收集整理的简述container与container-fluid的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。