bootstrap3中container与container_fluid外层容器的区别讲解


Posted in Javascript onDecember 04, 2017

.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。

度,并且是能够自适应的。无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。

.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。

以下是借鉴来的代码,仅供参考:

/*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;
}

总结

以上所述是小编给大家介绍的bootstrap3中container与container_fluid外层容器的区别讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
element中的$confirm的使用
Apr 26 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
基于JSONP原理解析(推荐)
Dec 04 #Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 #Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 #Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
浅析php单例模式
2014/11/25 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python binascii 进制转换实例
2019/06/12 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python解包概念及实例
2021/02/17 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
社区班子对照检查材料
2014/08/27 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
车位出租协议书范本
2016/03/19 职场文书
靠谱准确的求职信
2019/04/02 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python