Blazorise Bootstrap 响应类

Question

当使用Blazorisebootstrap 网格组件时，如何使用ColumnSize 属性设置响应式布局选项。我希望列在小屏幕上的大小为 12。

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

Answer 1

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>