瀏覽文檔

Bootstrap 列短代碼

Hugo Modules Authors 2023年6月29日 2 分鐘閱讀 短代碼 文檔 佈局 列 Col

用於生成網格列的短代碼。

贊助

成為我們的資助者或贊助商，以支持我們的工作。

愛發電 GitHub 贊助商 PayPal
本頁內容
贊助商
Bootstrap 列短代碼

語法

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

參數

size

索引名稱類型必填默認值版本示例
#0sizestring----

空格隔開的列尺寸，以 [size] 和 [breakpoint]:[size] 形式表示，比如 12、12 md:6 lg:3。

offset

索引名稱類型必填默認值版本示例
#1offsetstring----

空格隔開的列位移，以 [size] 和 [breakpoint]:[size] 形式表示，比如 0、0 md:1 lg:2。

可選項：[size], [breakpoint]-[size]。

class

索引名稱類型必填默認值版本示例
#2classstring----

額外的 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
行