Bootstrap 容器
-
容器概述
Bootstrap 还需要包含元素来包装站点内容。有两种容器类可供选择:- .container 类提供了一个响应式固定宽度容器
- .container-fluid 类提供了一个全宽度的容器,横跨视口的整个宽度
.container-fluid.container-fluid -
固定式容器
使用 .container 类创建一个响应式,固定宽度的容器。请注意,其宽度(最大宽度)将在不同的屏幕尺寸上改变:特小屏幕<576px小屏幕≥576px中等屏幕≥768px大屏幕≥992px特大屏幕≥1200pxmax-width 100% 540px 720px 960px 1140px 可以点击尝试一下打开上面的示例,并调整浏览器窗口的大小,以查看容器宽度将在不同的断点处改变。
-
-
容器填充
默认情况下,容器的左侧和右侧填充为15px,没有顶部或底部的填充。 因此,我们经常使用间距工具,例如额外的填充和边距,使它们看起来更好。 例如,.pt-3表示“添加16px的顶部填充”: -
容器边框和颜色
边框和颜色在许多应用程序中,也经常与容器一起使用:尝试一下输出结果:我的第一个Bootstrap页面此容器有边框和一些额外的填充和边距。我的第一个Bootstrap页面此容器具有深色背景颜色和白色文本,以及一些额外的填充和边距。我的第一个Bootstrap页面此容器具有蓝色背景色和白色文本,以及一些额外的填充和边距。 -
响应式容器
您还可以使用 .container-sm | md | lg | xl 类创建响应容器。容器的最大宽度将在不同的屏幕尺寸/视口上改变:Class 特小屏幕<576px小屏幕≥576px中等屏幕≥768px大屏幕≥992px特大屏幕≥1200px.container-sm 100% 540px 720px 960px 1140px .container-md 100% 100% 720px 960px 1140px .container-lg 100% 100% 100% 960px 1140px .container-xl 100% 100% 100% 100% 1140px -