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 相关文章推荐
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
phpwind中的数据库操作类
2007/01/02 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
vue组件与复用详解
2018/04/08 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python安装与使用redis的方法
2016/04/19 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python函数基本使用原理详解
2020/03/19 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
外语系毕业生自荐信范文
2013/12/16 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
高中军训感言800字
2014/03/05 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书