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实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
深入浅出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字符串分割函数用法实例
2015/03/17 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python性能优化技巧
2015/03/09 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python 进程的几种创建方式详解
2019/08/29 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
药品促销活动方案
2014/02/14 职场文书
爱耳日活动总结
2014/04/30 职场文书
小学班主任培训方案
2014/06/04 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
打架检讨书范文
2015/01/27 职场文书
监理中标通知书
2015/04/16 职场文书
公司奖励通知
2015/04/21 职场文书