Bootstrap 列短代码
用于生成网格列的短代码。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
语法
1{{% bs/col %}}
2BODY
3{{% /bs/col %}}
参数
size
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#0 | size | string | - | - | - | - |
空格隔开的列尺寸，以 [size] 和 [breakpoint]:[size] 形式表示，比如 12、12 md:6 lg:3。
offset
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#1 | offset | string | - | - | - | - |
空格隔开的列位移，以 [size] 和 [breakpoint]:[size] 形式表示，比如 0、0 md:1 lg:2。
可选项：[size], [breakpoint]-[size]。
class
| 索引 | 名称 | 类型 | 必填 | 默认值 | 版本 | 示例 |
|---|---|---|---|---|---|---|
#2 | class | string | - | - | - | - |
额外的 CSS 类名。
示例
等宽
源码
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
5{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
6{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
7{{% /bs/row %}}
8{{% /bs/container %}}结果
Col
Col
Col
Col
自定义宽度
源码
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
5{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
6{{% bs/col class="border py-3" size="12 md:6 lg:3" %}}Col{{% /bs/col %}}
7{{% /bs/row %}}
8{{% /bs/container %}}结果
Col
Col
Col
Col
带偏移的列
源码
1{{% bs/container %}}
2{{% bs/row class="text-center" %}}
3{{% bs/col class="border py-3" size="6 md:4" %}}Col{{% /bs/col %}}
4{{% bs/col class="border py-3" size="6 md:4" offset="md:4" %}}Col{{% /bs/col %}}
5{{% /bs/row %}}
6{{% /bs/container %}}结果
Col
Col