瀏覽文檔

Bootstrap 網格行短代碼

Hugo Modules Authors 2023年6月29日 1 分鐘閱讀 短代碼 文檔 行

用於生成網格行的短代碼

贊助

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

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

語法

1{{% bs/row %}}
2COLUMNS
3{{% /bs/row %}}

參數

cols

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

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

class

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

額外的 CSS 類名。

示例

以下例子分別於 small、medium 和 large（及以上）大小的屏幕顯示 1、2、3 列每行。

源碼
 1{{% bs/container class="text-center" %}}
 2{{% bs/row "1 md:2 lg:3" "mb-3" %}}
 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/col class="border py-3" %}}Col{{% /bs/col %}}
 8{{% bs/col class="border py-3" %}}Col{{% /bs/col %}}
 9{{% /bs/row %}}
10{{% /bs/container %}}
結果
Col
Col
Col
Col
Col
Col
容器
列