http://blog.csdn.net/sinat_27088253/article/details/50985432
近几天才开始系统的学习bootstrap,但马上就遇到了一个‘拦路虎’:container
和container-fluid
到底什么区别。
查了很多资料,看到很多人和我有同样的疑问,但是下面的回答一般都是一个是响应式一个宽度是百分百,说的好像是那么回事,但是你真的能明白吗?反正我是不能,于是我就去开始自己写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>
写完之后打开浏览器,f12后发现containe
r容器不止有15px的padding
,还有一个会随着浏览器宽度变化而变化的margin
,如图
container-fluid
之后,你会发现页面有明显的变化 padding
,并没有再加margin
。结论 container
类和container-fluid
类的区别体现在是否有随视口宽度改变的margin
存在。 container
类所谓的自适应也是通过margin
的改变来完成,container-fluid
类的百分百宽度是指在固有的15px的padding
前提下宽度总是当前视口的宽度。
联系客服