bootstrap中container類和container-fluid類的區(qū)別http://blog.csdn.net/sinat_27088253/article/details/50985432
近幾天才開始系統(tǒng)的學(xué)習(xí)bootstrap,但馬上就遇到了一個(gè)‘?dāng)r路虎’：container和container-fluid到底什么區(qū)別。
查了很多資料，看到很多人和我有同樣的疑問(wèn)，但是下面的回答一般都是一個(gè)是響應(yīng)式一個(gè)寬度是百分百，說(shuō)的好像是那么回事，但是你真的能明白嗎？反正我是不能，于是我就去開始自己寫demo。
‘container ’demo
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>hello world</h3>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
寫完之后打開瀏覽器，f12后發(fā)現(xiàn)container容器不止有15px的padding，還有一個(gè)會(huì)隨著瀏覽器寬度變化而變化的margin，如圖
上圖的盒模型為我在滿屏?xí)r的數(shù)值，對(duì)瀏覽器進(jìn)行縮放會(huì)有增加或減少的變化，具體請(qǐng)自己試驗(yàn)，實(shí)踐出真知嘛。
container-fluid demo
當(dāng)把類換成container-fluid之后，你會(huì)發(fā)現(xiàn)頁(yè)面有明顯的變化
，如圖
再看盒模型
你會(huì)發(fā)現(xiàn)這次整個(gè)容器就只有固定的15px的padding，并沒(méi)有再加margin。
結(jié)論
container 類和container-fluid類的區(qū)別體現(xiàn)在是否有隨視口寬度改變的margin存在。
container類所謂的自適應(yīng)也是通過(guò)margin的改變來(lái)完成，container-fluid類的百分百寬度是指在固有的15px的padding前提下寬度總是當(dāng)前視口的寬度。 |
