在bootstrap中的布局容器一欄中，提供了container與container-fluid兩種容器，其官方解釋為：

.container 類用于固定寬度并支持響應(yīng)式布局的容器。

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

所以，先說一說它們的共同點(diǎn)：這兩種容器的高度設(shè)定都是一致的，都為auto。而他們的不同就在于它們寬度的設(shè)定上。

• container根據(jù)屏幕寬度利用媒體查詢，已經(jīng)設(shè)定了固定的寬度，作用為階段性的改變寬度，所以在改變?yōu)g覽器的大小時(shí)，頁面是一個(gè)階段一個(gè)階段變化的。

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

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

還有一點(diǎn)則是使用container時(shí)，你會發(fā)現(xiàn)在容器外有一個(gè)隨著瀏覽器寬度變化而變化的margin，而使用container-fluid則沒有這個(gè)margin。而這個(gè)margin正是container的作用原理。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。