博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap中的container与container-fluid的用法
阅读量:7027 次
发布时间:2019-06-28

本文共 587 字,大约阅读时间需要 1 分钟。

使用过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的作用原理。

转载于:https://www.cnblogs.com/sunyubin/p/9678807.html

你可能感兴趣的文章
去掉字符串左右两边的空格
查看>>
Android层次化安全架构及核心组件概览
查看>>
单机服务器已经安装好二进制mysql5.6.20,然后开启mysql多实例
查看>>
ACM 序号互换
查看>>
JVM Garbage Collection
查看>>
中级篇第一期:UIButton内部再利用
查看>>
记一次集群内无可用http服务问题排查
查看>>
Linux中查看socket状态
查看>>
我的友情链接
查看>>
LVS NAT 模式突然很卡ip_conntrack
查看>>
重拾CCNA,学习笔记持续更新ing......(7)
查看>>
FreeBSD下的开机自启动
查看>>
我的友情链接
查看>>
Linux命令行快捷键
查看>>
python 的实用技巧
查看>>
创建RHCS集群环境
查看>>
iptables
查看>>
API、Win32 SDK、Win32项目、MFC、Windows窗体应用程序的区别
查看>>
电子商务未来的趋势,难道我真的错了?
查看>>
【MySQL】RHEL6.5下MySQ编译安装、简单的MySQL操作
查看>>