Bootstrap4--Contains容器

Bootstrap4--Contains容器

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： VS

作者：小益

撰写时间：2021年6月8日

一、介绍container容器：

container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中，这是启用整个栅格系统必不可少的前置条件， 它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）

下面的表格描述了container在不同的屏幕的 max-width（最大宽度） 规范，以及 .container 、 .container-fluid 的断点区别

二、解释表中各个类的意思

.container：

当屏幕小于576px时，占满屏幕百分之百，当屏幕为≥576px时，则占满屏幕的540px并居中，当屏幕为≥768px时，则占满屏幕的720px并居中，当屏幕为≥992px，则占满屏幕的960px并居中，当屏幕为≥1200px时，则占满屏幕的1140px并居中

.container-sm：

意思跟.contains一样

.container-md：

当屏幕小于576px时，占满屏幕百分之百，当屏幕为≥576px时，则占满屏幕的百分之百，当屏幕为≥768px时，则占满屏幕的720px并居中，当屏幕为≥992px，则占满屏幕的960px并居中，当屏幕为≥1200px时，则占满屏幕的1140px并居中

.container-lg：

当屏幕小于576px时，占满屏幕百分之百，当屏幕为≥576px时，则占满屏幕的百分之百，当屏幕为≥768px时，占满屏幕百分之百，当屏幕为≥992px，则占满屏幕的960px并居中，当屏幕为≥1200px时，则占满屏幕的1140px并居中

.container-xl：

当屏幕小于576px时，占满屏幕百分之百，当屏幕为≥576px时，则占满屏幕的百分之百，当屏幕为≥768px时，占满屏幕百分之百，当屏幕为≥992px，占满屏幕百分之百，当屏幕为≥1200px时，则占满屏幕的1140px并居中

.container-fluid：

屏幕不管在多少像素下始终为百分之百

三、代码写法和用途

默认的.container是一个响应式容器，它有固定宽度和最max-width设置，并支持响应式断点，使用如下：

 

这是一组响应式外部容器，它允许在指定的屏幕下定义100%宽（这更适合移动等场景），max-width属性会在不断的断点有表现不同，比如.container-sm则只在sm屏幕下显示100%宽，其他断点包括.container-md、.container-lg、.container-xl，使用如下：

 

.container-fluid支持全屏的流式布局，使用如下：

 

 

以上就是我的分享，请多多指教