容器 (Containers)
容器 (Containers)是Bootstrap的基本构建块,它包含,填充和对齐给定设备或视口中的内容。更新于: 2023-04-30 14:28:21 查看: 570
发布于: 2021-9-8 07:51 发布者: 大米
工作原理
容器 (Containers)是Bootstrap中最基本的布局元素,在使用 默认网格系统时是必需的。容器用于容纳、填充和(有时)使内容居中。虽然容器 (Containers) 可以 嵌套,但大多数布局不建议这样做,这样只会使你的代码更加臃肿。
Bootstrap有三个不同的容器 (Containers):
.container
,它设置每个响应断点的最大宽度(max-width
).container-fluid
, 所有断点的宽度为100%(width: 100%
).container-{断点规格}
, 宽度100%(width: 100%
)直到指定的断点
下表说明了每个容器的
max-width
与每个断点处原始 .container
和.container-fluid
的比较。在我们的 网格示例 中查看它们的实际操作并进行比较。
超小屏幕 <576px |
小屏幕 ≥576px |
中等屏幕 ≥768px |
大屏幕 ≥992px |
超大屏幕 ≥1200px |
超大型屏幕 ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
默认容器
默认的.container
类是一个响应性的、固定宽度的容器,这意味着它的最大宽度会在每个断点处改变
<div class="container">
<!-- Content here -->
</div>
响应式容器
响应式容器允许您指定100%宽的类,直到达到指定的断点为止,此后,我们对每个较高的断点应用最大宽度
max-width
。 例如,.container-sm
的宽度为100%,直到到达 sm
断点为止,该断点将按 md
, lg
, xl
, 和 xxl
进行扩展。<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
流式布局
使用
.container-fluid
作为全宽度容器,跨越整个屏幕宽度。<div class="container-fluid">
...
</div>
扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。