bootstrap3中container與container_fluid外層容器的區(qū)別講解
.container與.container_fluid是bootstrap中的兩種不同類型的外層容器，按照官方的說法，這兩者的區(qū)別是：
.container 類用于固定寬度并支持響應(yīng)式布局的容器。
.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
所謂固定寬度并不是允許開發(fā)者自己設(shè)置容器的寬度，而是bootstrap內(nèi)部根據(jù)屏幕寬度利用媒體查詢，幫我們設(shè)置了固定寬度，并且是能夠自適應(yīng)的。
度，并且是能夠自適應(yīng)的。無論何種情況下，請不要手動為響應(yīng)式布局中的外層布局容器設(shè)置固定寬度值。
.container-fluid自動設(shè)置為外層視窗的100%，如果外層視窗為body，那么它將全屏顯示，無論屏幕大小，并且自動實(shí)現(xiàn)響應(yīng)式布局。
以下是借鑒來的代碼，僅供參考：
/*0-768px以上寬度container為100%*/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/*768-992px以上寬度container為750px*/
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/*992-1200px以上寬度container為970px*/
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*1200px以上寬度container為1170px*/
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/*container-fluid為100%*/
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
總結(jié)
以上所述是小編給大家介紹的bootstrap3中container與container_fluid外層容器的區(qū)別講解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JS圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
下面小編就為大家?guī)硪黄狫S圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JavaScript開發(fā)時的五個注意事項(xiàng)
JavaScript開發(fā)時的五個注意事項(xiàng)講述了表單事件、鏈接、循環(huán)優(yōu)化、匿名函數(shù)、字符串連接等優(yōu)化技巧,需要的朋友可以參考一下2007-12-12
微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案
當(dāng)鍵盤彈出后，頁腳也被頂起來；而當(dāng)搜索完（要刷新整體頁面），鍵盤縮回后，iframe里 鍵盤當(dāng)住的地方變成白色。怎么解決這個問題呢？下面腳本之家小編給大家分享微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案，一起看看吧2017-09-09
圖表組件Chart.js是Bootstrap比較好用的組件之一,與一款收費(fèi)的組件highchart類似,效果上來看免費(fèi)與收費(fèi)的產(chǎn)品相差還是有一點(diǎn)點(diǎn)的，不過功能上差不多能滿足我們項(xiàng)目的需要，本文給大家介紹Bootstrap Chart組件使用，需要的朋友參考下吧2016-04-04
js獲取url中的參數(shù)且參數(shù)為中文時通過js解碼
這篇文章主要介紹了url中傳遞中文參數(shù)的時候通過js解碼,需要的朋友可以參考下2014-03-03
這篇文章主要為大家介紹了Web Audi 繪制音頻圖譜實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
用戶代理字符串userAgent可實(shí)現(xiàn)的四個識別
用戶代理字符串:navigator.userAgent ，本文給大家分享用戶代理字符串userAgent可實(shí)現(xiàn)的四個識別，需要的朋友可以參考下2015-09-09
javascript常用經(jīng)典算法實(shí)例詳解
這篇文章主要介紹了javascript常用算法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了JavaScript中常見的各種排序算法以及堆、棧、鏈表等數(shù)據(jù)結(jié)構(gòu)的相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-11-11
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
最近項(xiàng)目結(jié)束，很空閑，于是就試著仿照微信跳一跳寫了一個極簡版的游戲，到底簡單到什么程度呢?大家可以參考下本文2018-01-01