浏览文档

Bootstrap 容器短代码

Hugo Modules Authors 2023年6月29日 2 分钟阅读 短代码 文档 Container 容器

容器是 Bootstrap 中最基本的布局元素，使用默认网格系统时必须使用容器。容器用于容纳、填充和（有时）居中放置其中的内容。虽然容器可以嵌套，但大多数布局并不需要嵌套容器。

赞助

成为我们的资助者或赞助商，以支持我们的工作。

爱发电 GitHub 赞助商 PayPal
本页内容
赞助商
Bootstrap 容器短代码

语法

1{{% bs/container %}}
2BODY
3{{% /bs/container %}}

参数

breakpoint

索引名称类型必填默认值版本示例
#0breakpointstring----

容器的 breakpoint：sm、md、lg、xl、xxl、fluid。

class

索引名称类型必填默认值版本示例
#1classstring----

額外的 CSS 類名。

bg

索引名称类型必填默认值版本示例
-bgstring----

背景图片，支持图片资源、公共图片和外部图片。

bgColor

索引名称类型必填默认值版本示例
-bgColorstring--v0.19.0-

背景颜色。

示例

源码
 1{{% bs/container class="text-bg-primary text-center py-3 mb-2" %}}
 2Default container
 3{.mb-0}
 4{{% /bs/container %}}
 5
 6{{% bs/container breakpoint="sm" class="text-bg-primary text-center py-3 mb-2" %}}
 7100% wide until small breakpoint
 8{.mb-0}
 9{{% /bs/container %}}
10
11{{% bs/container breakpoint="md" class="text-bg-primary text-center py-3 mb-2" %}}
12100% wide until medium breakpoint
13{.mb-0}
14{{% /bs/container %}}
15
16{{% bs/container breakpoint="lg" class="text-bg-primary text-center py-3 mb-2" %}}
17100% wide until large breakpoint
18{.mb-0}
19{{% /bs/container %}}
20
21{{% bs/container breakpoint="xl" class="text-bg-primary text-center py-3 mb-2" %}}
22100% wide until extra large breakpoint
23{.mb-0}
24{{% /bs/container %}}
25
26{{% bs/container breakpoint="xxl" class="text-bg-primary text-center py-3 mb-2" %}}
27100% wide until extra extra large breakpoint
28{.mb-0}
29{{% /bs/container %}}
30
31{{% bs/container breakpoint="fluid" class="text-bg-primary text-center py-3 mb-2" %}}
32100% wide at all breakpoints
33{.mb-0}
34{{% /bs/container %}}
结果

Default container

100% wide until small breakpoint

100% wide until medium breakpoint

100% wide until large breakpoint

100% wide until extra large breakpoint

100% wide until extra extra large breakpoint

100% wide at all breakpoints

行