C# Blazorise引导响应类

当使用

Blazorise

引导程序

网格组件时，如何使用

ColumnSize

属性设置响应布局选项。我希望在小屏幕上的列大小为12

        <Row>
            <Column ColumnSize="ColumnSize.Is3">
                <StatusSelectListComponent @bind-Text="@_item.Status" OnSave="@ItemEditSave" OnCancel="@ItemEditCancel"></StatusSelectListComponent>
            </Column>
        </Row>

---

Blazorise

允许您将大小值链接在一起，并已将属性映射到引导类，如下所示：

╔══════════════╦═══════════╗
║ Blazorise    ║ Bootstrap ║
╠══════════════╬═══════════╣
║ OnMobile     ║ col-xs    ║
╠══════════════╬═══════════╣
║ OnTablet     ║ col-sm    ║
╠══════════════╬═══════════╣
║ OnDesktop    ║ col-md    ║
╠══════════════╬═══════════╣
║ OnWidescreen ║ col-lg    ║
╠══════════════╬═══════════╣
║ OnFullHD     ║ col-xl    ║
╚══════════════╩═══════════╝

因此，

Blazorise ColumnSize

属性如下所示：

    <Column ColumnSize="ColumnSize.Is12.OnTablet.Is12.OnMobile.Is3.OnDesktop.Is3.OnWidescreen.Is3.OnFullHD">
    </Column>

生成的html将是：

<div class="col col-sm-12 col-xs-12 col-md-3 col-lg-3 col-xl-3" style=""></div>

---

以下是与此相关的文档：