bootstrap3中container与container_fluid容器的区别
来源:互联网 发布:淘宝钻石等级可以买吗 编辑:程序博客网 时间:2024/05/22 06:08
.Container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
一开始,我以为所谓固定宽度是开发者可以设置该容器为固定宽度
当我这样做了以后,发现事情并不简单(微笑脸),缩小浏览器宽度到小于900px的值时,内容不再自适应了,所以,我调出了调试台,看了bootstrap.css中对.container的定义:
.container{ padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto}@media (min-width:768px){ .container{ width:750px }}@media (min-width:992px){ .container{ width:970px }}@media (min-width:1200px){ .container{ width:1170px }}
所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。
下面进行了简单测试,图片中的标签页组件外层是<div class="container"><div>
,调整窗口的大小,盒模型(图片右下角)显示的宽度的确是是750px和970px.
窗口宽900px:
窗口宽1000px:
而且可以看出内容都是自动居中的,验证了bootstrap.css中对.container的定义。
所以,请不要手动为响应式布局中的外层布局容器设置固定宽度值。
那么,.container-fluid,又是怎样的呢?
根据测试,.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。
阅读全文
0 0
- bootstrap3中container与container_fluid容器的区别
- bootstrap3中container与container_fluid容器的区别
- bootstrap中的container类和container_fluid类的区别
- python iterator迭代器、yield、container容器和for循环的联系与区别
- docker中宿主机与容器(container)互相拷贝传递文件的方法
- java中数组与容器的区别
- Container 容器的使用
- bootstrap中container类和container-fluid类的区别
- bootstrap中container类和container-fluid类的区别
- container-fluid container的区别
- Container With Most Water (容器中盛最多的水)
- Spring的容器(container)
- laravel的 容器container(ioc)
- 关联容器与顺序容器的区别
- web容器与servlet容器的区别
- 容器适配器与顺序容器的区别
- STL中遍历容器it++与++it的区别
- C++中数组和容器的区别与联系
- 【SpringMVC】@Controller和@RequestMapping注解说明
- 如何导出微信语音为mp3
- ubuntu中apt-get的默认安装路径。安装、卸载以及查看的方法总结
- React-Native之手势基础篇
- H5 img标签图片无法显示 -- 解决方案
- bootstrap3中container与container_fluid容器的区别
- Http协议(一)
- 将本地项目存储到github的步骤
- java的IO之输入和输出概述
- SwipeMenuRecyclerView添加头部和底部
- 详解CSS中:nth-child的用法
- select 和 epoll的区别
- 数据应用达人之SQL基础教程分享8-子查询、连接、组合查询
- ExtJs动态开始菜单