.container與.container_fluid是bootstrap中的兩種不同類型的外層容器,按照官方的說法,這兩者的區別是: .container 類用於固定寬度並支持響應式佈局的容器。 .container-fluid 類用於 100% 寬度,占據全部視口(viewport)的容器。 所 ...
.container與.container_fluid是bootstrap中的兩種不同類型的外層容器,按照官方的說法,這兩者的區別是:
.container 類用於固定寬度並支持響應式佈局的容器。
.container-fluid 類用於 100% 寬度,占據全部視口(viewport)的容器。
所謂固定寬度並不是允許開發者自己設置容器的寬度,而是bootstrap內部根據屏幕寬度利用媒體查詢,幫我們設置了固定寬度,並且是能夠自適應的。
度,並且是能夠自適應的。無論何種情況下,請不要手動為響應式佈局中的外層佈局容器設置固定寬度值。
.container-fluid自動設置為外層視窗的100%,如果外層視窗為body,那麼它將全屏顯示,無論屏幕大小,並且自動實現響應式佈局。
以下是借鑒來的代碼,僅供參考:
1 /*0-768px以上寬度container為100%*/ 2 .container { 3 padding-right: 15px; 4 padding-left: 15px; 5 margin-right: auto; 6 margin-left: auto; 7 } 8 /*768-992px以上寬度container為750px*/ 9 @media (min-width: 768px) { 10 .container { 11 width: 750px; 12 } 13 } 14 /*992-1200px以上寬度container為970px*/ 15 @media (min-width: 992px) { 16 .container { 17 width: 970px; 18 } 19 } 20 /*1200px以上寬度container為1170px*/ 21 @media (min-width: 1200px) { 22 .container { 23 width: 1170px; 24 } 25 } 26 27 /*container-fluid為100%*/ 28 .container-fluid { 29 padding-right: 15px; 30 padding-left: 15px; 31 margin-right: auto; 32 margin-left: auto; 33 } 34 35 作者:JasonQiao 36 鏈接:http://www.jianshu.com/p/a91f4cc4a7cb 37 來源:簡書 38 著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。