在 Blazorise 中的两张卡片之间及其周围（带边距）添加 space

Question

如何在 Blazorise 的卡片周围添加一些 space？我在 Column 中用类添加了一些边距，但这没有用，因为只有“New Survey”被下移了，我为两个 Columns 都做了，我还更改了 Row Gutter numbers，没有帮助我...

这是我的图片：

对应代码如下：

        <Column ColumnSize="ColumnSize.Is6">
            <Card>
                <CardHeader>
                    <CardTitle>
                        @localizer["SurveyPreviewTitle"]
                    </CardTitle>
                </CardHeader>
                <CardBody>
                    <SurveyPreviewView />
                </CardBody>
            </Card>
        </Column>
        <Column ColumnSize="ColumnSize.Is6">
            <Card>
                <CardHeader>
                    <CardTitle>@localizer["StatisticTitle"]</CardTitle>
                </CardHeader>
                <CardBody>
                    <SurveyStatsView />
                </CardBody>
            </Card>
        </Column>
    </Row>

Answer 1

来自 https://blazorise.com/docs/components/grid/

你可以只使用装订线。将您的起始行标记修改为如下所示：

<Row Gutter="(32, 16)">

另一种方法是使用偏移量 --

而不是使用

 "ColumnSize.Is6"

在两列上，您可以使用 ColumnSize.Is5，并使用偏移量 2

第一列-

ColumnSize.Is5

第二列-

ColumnSize.Is5.Is2.WithOffset

Answer 2

我有一个宽屏幕，所以我还必须在两张卡之间做一个更大的 space。因为它是高分辨率显示器 (3440 * 1440)

考虑到这一点，我不得不为 <Row Gutter="(64, 50)"

使用更大的数字

我希望这可以帮助人们摆脱详细的文档和答案，因此只需将行间距调整为“更大”即可。

在 Blazorise 中的两张卡片之间及其周围（带边距）添加 space

Add space between two cards and around them (with Margin) in Blazorise

html

css

c#

margin

blazorise