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