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 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
Vue声明式渲染详解
May 17 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
Vue的props父传子的示例代码
May 20 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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编程效率 引入缓存机制提升性能
2010/02/15 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
js格式化时间的方法
2015/12/18 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Node.js实现发送邮件功能
2017/11/06 Javascript
SVG实现时钟效果
2018/07/17 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python打印不合法的文件名
2020/07/31 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
办公室内勤工作职责
2013/12/11 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
python数字图像处理之图像的批量处理
2022/06/28 Python