我们可以使用以下两个容器类.container 类是默认的容器提供一个固定宽度的布局宽度会随着屏幕大小的不同而调整。。.container-fluid 类用于 100% 宽度占据全部视口viewport的容器使用这个容器类会始终充满整个屏幕的宽度适用于全屏布局。。固定宽度.container 类用于创建固定宽度的响应式页面。注意宽度 (max-width) 会根据屏幕宽度同比例放大或缩小。超级小屏幕576px小屏幕≥576px中等屏幕≥768px大屏幕≥992px特大屏幕≥1200px超级大屏幕≥1400pxmax-width100%540px720px960px1140px1320px以下实例中我们可以尝试调整浏览器窗口的大小来查看容器宽度在不同屏幕中等变化Bootstrap5 .container 实例div classcontainer h1我的第一个 Bootstrap 页面/h1 p这是一些文本。/p /div注意超级大屏幕 (≥1400px) 是 Bootstrap 5 新增加的 Bootstrap 4 最大的是特大屏幕 (≥1200px)。100% 宽度.container-fluid 类用于创建一个全屏幕尺寸的容器容器始终跨越整个屏幕宽度width 始终为 100%Bootstrap5 .container-fluid 实例div classcontainer-fluid h1我的第一个 Bootstrap 页面/h1 p使用了 .container-fluid100% 宽度占据全部视口viewport的容器。/p /div容器内边距默认情况下容器都有填充左右内边距顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。 比如 .pt-5 就是用于填充顶部内边距Bootstrap5 实例div classcontainer pt-5/div容器的边框和颜色Bootstrap 也提供了一些边框border和颜色bg-dark、bg-primary等类用于设置容器的样式Bootstrap5 实例div classcontainer p-5 my-5 border/div div classcontainer p-5 my-5 bg-dark text-white/div div classcontainer p-5 my-5 bg-primary text-white/div后面章节我们会详细说明这些样式。响应式容器你可以使用 .container-sm|md|lg|xl 类来创建响应式容器。容器的 max-width 属性值会根据屏幕的大小来改变。Class超小屏幕576px小屏幕≥576px中等屏幕≥768px大屏幕≥992px特大屏幕≥1200px超级大屏幕≥1400px.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320pxBootstrap5 实例div classcontainer-sm.container-sm/div div classcontainer-md.container-md/div div classcontainer-lg.container-lg/div div classcontainer-xl.container-xl/div div classcontainer-xxl.container-xxl/div