BulmaRazor

列选项(Column options)

设计不同类型的栅格布局

垂直对齐(Vertical alignment)

如果想要列要垂直对齐列, 将 IsVcentered 修饰器添加到 Columns 容器即可.

视图
代码

First column

Second column with more content. This is so you can see the vertical alignment.

<Columns IsVcentered>
    <Column Size="Size.Size8">
        <Notification Color="Color.Primary">First column</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Second column with more content. This is so you can see the vertical alignment.</Notification>
    </Column>
   
</Columns>

多行(Multiline)

当你想换行时，你可以闭合 Columns 容器，然后开始新的一行，您也可以在容器上通过增加 IsMultiline 修饰符，来增加更多 Column 元素。

视图
代码

OneQuarter

Half

OneQuarter

Auto

<Columns IsMultiline IsMobile>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.Half">
        <Notification Color="Color.Primary">Half</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">OneQuarter</Notification>
    </Column>
    <Column>
        <Notification Color="Color.Primary">Auto</Notification>
    </Column>
</Columns>

居中列(Centering columns)

虽然您可以通过空列（例如<Column ></Column>）来创建一个水平居中的 Column 元素。当然您也可以通过在 Columns 父元素上添加 IsCentered修饰符来实现:

视图
代码

Half

<Columns IsMobile IsCentered>
    <Column Size="Size.Half">
        <Notification Color="Color.Primary">Half</Notification>
    </Column>
</Columns>

与 IsMultiline一起使用来创建一个灵活的居中列表。（尝试改变窗口大小来查看区别）

视图
代码

IsNarrow
First Column 第一列

IsNarrow
Our Second Column 我们的第二列

IsNarrow
Thired Column 第三列

IsNarrow
The Fourth Column 这是第四列

IsNarrow
Fifth Column 第五列

<Columns IsMobile IsCentered IsMultiline>
    <Column IsNarrow>
        <Notification Color="Color.Primary">IsNarrow
            <br>
            First Column 第一列
        </Notification>
    </Column>
    <Column IsNarrow>
        <Notification Color="Color.Primary">IsNarrow
            <br>
            Our Second Column 我们的第二列
        </Notification>
    </Column>
    <Column IsNarrow>
        <Notification Color="Color.Primary">IsNarrow
            <br>
            Thired Column 第三列
        </Notification>
    </Column>
    <Column IsNarrow>
        <Notification Color="Color.Primary">IsNarrow
            <br>
            The Fourth Column  这是第四列
        </Notification>
    </Column>
    <Column IsNarrow>
        <Notification Color="Color.Primary">IsNarrow
            <br>
            Fifth Column 第五列
        </Notification>
    </Column>
</Columns>

文档