bootstrap中的container与container-fluid的用法
2024-04-05 21:31:29
使用过bootstrap的同学都知道，其container与container-fluid都是设置文本居中，但两者还是有很大的区别。
官方给出的解释是：
.container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。
container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。
container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。
如果比喻的话，container就如一个嵌套的水池，只有当最里面最小的那个池子注满水后才会溢到下一个更大的池子，而container-fluid则没有隔断，倒入多少水，就充满多少。
还有一点则是使用container时，你会发现在容器外有一个随着浏览器宽度变化而变化的margin，而使用container-fluid则没有这个margin。而这个margin正是container的作用原理。
最新文章
- python学习之day1-基础知识
- iOS开发--利用MPMoviePlayerViewController播放视频简单实现
- win8下出现安装sql2012 正在启动操作系统功能"NetFx3"
- C#输入输出重定向
- jQuery显示隐藏动态效果的几种写法
- Asp.net MVC4 使用EF实现数据库的增删改查
- POJ 2398 Toy Storage
- 绩效等级系统与MBO
- 使用SQL 从表中取记录
- java写文件时，输出不完整的原因以及解决方法close()或flush()
- 新手立体四子棋AI教程(2)——价值评估函数
- udt的java实现
- https原理及其中所包含的对称加密、非对称加密、数字证书、数字签名
- Linux mount 命令
- wamp设置实现本机IP或者局域网访问
- 传的参数是url地址时需要特殊处理
- C++17尝鲜：编译期 if 语句
- error C4430: 缺少类型说明符 - 假定为 int。注意: C++ 不支持默认 int 错误的解决方法
- join()方法跟踪
- Win10 主题 美化 动漫