原文鏈接：https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中，柵格相信大家都很熟悉，簡直就是佈局神器啊，Bootstrap Blazor 組件庫當然毫無意外地支持該功能，並且封裝成了組件，使用更加方便，下麵我們一起來看看吧！ 首先，這 ...
原文鏈接：https://www.cnblogs.com/ysmc/p/16133351.html
在 Bootstrap 中，柵格相信大家都很熟悉，簡直就是佈局神器啊，Bootstrap Blazor 組件庫當然毫無意外地支持該功能，並且封裝成了組件，使用更加方便，下麵我們一起來看看吧！
首先，這是官網關於 Row 組件的文檔鏈接：傳送門
按照慣例，直接上代碼！
<div style="margin:10px"> <Row ItemsPerRow="ItemsPerRow.Three"> <Card> <CardBody> <h5 class="card-title">Cell 1</h5> <p class="card-text">靜夜詩</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> <Card> <CardBody> <h5 class="card-title">Cell 2</h5> <p class="card-text">李白</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> <Card> <CardBody> <h5 class="card-title">Cell 3</h5> <p class="card-text">床前明月光</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> <Card> <CardBody> <h5 class="card-title">Cell 4</h5> <p class="card-text">疑是地上霜</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> <Card> <CardBody> <h5 class="card-title">Cell 5</h5> <p class="card-text">舉頭望明月</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> <Card> <CardBody> <h5 class="card-title">Cell 6</h5> <p class="card-text">低頭思故鄉</p> <div class="align-end"> <a href="#" class="btn btn-primary">詳情</a> </div> </CardBody> </Card> </Row> </div>
因為我給 Row 組件的 ItemsPerRow 屬性設置了一行顯示3個，所以就有了以下的一個效果，是不是非常好用啊。
以下是支持的每行個數的枚舉項。
namespace BootstrapBlazor.Components { // // 摘要: // 每行顯示多少組件的枚舉 public enum ItemsPerRow { // // 摘要: // 每行一個 One = 0, // // 摘要: // 每行兩個 Two = 1, // // 摘要: // 每行三個 Three = 2, // // 摘要: // 每行四個 Four = 3, // // 摘要: // 每行六個 Six = 4, // // 摘要: // 每行12個 Twelve = 5 } }
當然，有些小伙伴可以需求比較刁鑽，例如第一個要占用兩個位置，要霸氣，要突出！
我們的組件也為你考慮到了這樣的情況，就是 Row 組件中的 ColSpan 屬性，熟悉 table 應該能猜出來這個是什麼意思了，就是該 Row 占用了多少個位置，我們將上面的頁面稍作修改：
<div style="margin:10px"> <Row ItemsPerRow="ItemsPerRow.Two"> <Row ColSpan="2"> <Card IsCenter="true"> <CardBody> <p class="card-text">靜夜詩</p> </CardBody> </Card> </Row> <Row ColSpan="2"> <Card IsCenter="true"> <CardBody> <p class="card-text">李白</p> </CardBody> </Card> </Row> <Card IsCenter="true"> <CardBody> <p class="card-text">床前明月光</p> </CardBody> </Card> <Card IsCenter="true"> <CardBody> <p class="card-text">疑是地上霜</p> </CardBody> </Card> <Card IsCenter="true"> <CardBody> <p class="card-text">舉頭望明月</p> </CardBody> </Card> <Card IsCenter="true"> <CardBody> <p class="card-text">低頭思故鄉</p> </CardBody> </Card> </Row> </div>
是不是很簡單，很有意思！
好了，關於Row組件的分享就這麼多，實在是太簡單了，都沒什麼好寫的，就這樣吧，拜拜，各位晚安！
Attributes 屬性
| 參數 | 說明 | 類型 | 可選值 | 預設值 |
|---|---|---|---|---|
| ItemsPerRow | 設置一行顯示幾個控制項 | enum | One,Two,Three,Four,Six,Twelve | One |
| RowType | 設置排版格式，子Row如果不指定，會使用父Row的設置 | enum? | Normal, Inline | null |
| ColSpan | 設置子Row跨父Row列數 | int? | - | null |
| MaxCount | 設置行內最多顯示的控制項數 | int? | - | null |
寫在最後
希望大佬們看到這篇文章，能給項目點個star支持下，感謝各位！
star流程：
1、訪問點擊項目鏈接：BootstrapBlazor 
2、點擊star，如下圖，即可完成star，關註項目不迷路：
另外還有兩個GVP項目，大佬們方便的話也點下star唄，非常感謝：
BootstrapAdmin 項目地址：
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 項目地址：
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群（QQ）歡迎加群討論
BA & Blazor ①（795206915） BA & Blazor ②（675147445）
