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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 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简单封装了一些常用JS操作
2007/02/25 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
最简单的JS实现json转csv的方法
2019/01/10 Javascript
jquery+css实现Tab栏切换的代码实例
2019/05/14 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
python对象及面向对象技术详解
2016/07/19 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
于丹讲座视频观后感
2015/06/15 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python