时间:2021-05-28
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。
度,并且是能够自适应的。无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。
.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。
以下是借鉴来的代码,仅供参考:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}@media (min-width: 768px) { .container { width: 750px; }}@media (min-width: 992px) { .container { width: 970px; }}@media (min-width: 1200px) { .container { width: 1170px; }}.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}总结
以上所述是小编给大家介绍的bootstrap3中container与container_fluid外层容器的区别讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS全局样式1、布局容器类样式:.container和.container-fluid.container固定宽度并且具有响应式。.container-flu
源码解读Bootstrap网格系统工作原理数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:.
一、分别加载jquery插件与jquery.masonry插件二、瀑布流局部样式代码.container-fluid{padding:20px;}.box{ma
用于布局的容器组件,方便快速搭建页面的基本结构:el-container:外层容器。当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列。el-he
一、dockerps列出容器二、dockercp拷贝文件至容器注:docker中宿主机与容器(container)互相拷贝传递文件的方法1、从容器拷贝文件到宿主