Blazorise Grid布局问题：两个ApexCharts无法横向并排显示

问题核心是图表所在的Column未被Row组件包裹。Blazorise的Grid布局依赖Row作为flex容器来实现Column的横向排列，直接将Column放在CardBody中时，Column会以块级元素形式渲染，自然上下堆叠。

修改后的代码 #

<Row Margin="Margin.Is4">
    <Column ColumnSize="ColumnSize.Is12">
        <Card Background="Background.Light">
            <CardBody>
                <CardTitle Size="3">
                    Card title
                </CardTitle>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row Margin="Margin.Is4">
    <Column ColumnSize="ColumnSize.Is12">
        <Card Background="Background.Light">
            <CardBody>
                <!-- 新增Row包裹两个图表Column -->
                <Row>
                    <Column ColumnSize="ColumnSize.Is6">
                        <ApexChart TItem="Software"
                                   Title="Order Net Value"
                                   Style="width: 100%;">
                            <ApexPointSeries TItem="Software"
                                             Items="Softwares"
                                             Name="Gross Value"
                                             XValue="@(e => e.Developer)"
                                             YAggregate="@(e => e.Count())"
                                             OrderByDescending="e=>e.Y"
                                             SeriesType="SeriesType.Bar" />
                        </ApexChart>
                    </Column>
                    <Column ColumnSize="ColumnSize.Is6">
                        <ApexChart TItem="License"
                                   Title="Order Gross Value"
                                   Style="width: 100%;">
                            <ApexPointSeries TItem="License"
                                             Items="Licenses"
                                             Name="Gross Value"
                                             SeriesType="SeriesType.Pie"
                                             XValue="@(e => e.taken)"
                                             YAggregate="@(e => e.Count())"
                                             OrderByDescending="e=>e.Y" />
                        </ApexChart>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>

额外注意点 #

• 确保Row内的Column宽度总和不超过12（这里Is6+Is6=12，符合Grid规则）
• 给ApexChart添加Style="width: 100%;"，让图表自适应Column宽度，避免因图表自身固定宽度导致布局异常

内容的提问来源于stack exchange，提问作者Herbix