BulmaRazor

尺寸列(Column sizes)

分别定义每个列的尺寸(size)

如果要更改单个列的大小，可以使用Size属性类:

Size.ThreeQuarters
Size.TwoThirds
Size.Half
Size.OneThird
Size.OneQuarter
Size.Full

其他列将自动填充剩余空间

可以使用20% 的倍数:

Size.FourFifths
Size.ThreeFifths
Size.TwoFifths
Size.OneFifth

视图
代码

Size.Full

Size.FourFifths

Auto

Size.ThreeQuarters

Auto

Size.TwoThirds

Auto

Size.ThreeFifths

Auto

Size.Half

Auto

Size.TwoFifths

Auto

Size.OneThird

Auto

Size.OneQuarter

Auto

Size.OneFifth

Auto

<Columns>
    <Column Size="Size.Full">
        <Notification Color="Color.Primary">
            Size.Full
        </Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.FourFifths">
        <Notification Color="Color.Primary">
            Size.FourFifths
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.ThreeQuarters">
        <Notification Color="Color.Primary">
            Size.ThreeQuarters
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.TwoThirds">
        <Notification Color="Color.Primary">
            Size.TwoThirds
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.ThreeFifths">
        <Notification Color="Color.Primary">
            Size.ThreeFifths
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.Half">
        <Notification Color="Color.Primary">
            Size.Half
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.TwoFifths">
        <Notification Color="Color.Primary">
            Size.TwoFifths
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.OneThird">
        <Notification Color="Color.Primary">
            Size.OneThird
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.OneQuarter">
        <Notification Color="Color.Primary">
            Size.OneQuarter
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>
<Columns>
    <Column Size="Size.OneFifth">
        <Notification Color="Color.Primary">
            Size.OneFifth
        </Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
    <Column>
        <Notification>Auto</Notification>
    </Column>
</Columns>

12列栅格系统

栅格由 12 列组成，每个栅格都有自己的尺寸:

Size.Size1
Size.Size2
Size.Size3
Size.Size4
Size.Size5
Size.Size6
Size.Size7
Size.Size8
Size.Size9
Size.Size10
Size.Size11
Size.Size12

视图
代码

Size.Size1

Size.Size2

Size.Size3

Size.Size4

Size.Size5

Size.Size6

Size.Size7

Size.Size8

Size.Size9

Size.Size10

Size.Size11

Size.Size12


<Columns>
    <Column Size="Size.Size1">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size1</Notification>
    </Column>
    @for (int i = 0; i < 11; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>
    <Column Size="Size.Size2">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size2</Notification>
    </Column>
    @for (int i = 0; i < 10; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>
    <Column Size="Size.Size3">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size3</Notification>
    </Column>
    @for (int i = 0; i < 9; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>
    <Column Size="Size.Size4">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size4</Notification>
    </Column>
    @for (int i = 0; i < 8; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size5">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size5</Notification>
    </Column>
    @for (int i = 0; i < 7; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size6">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size6</Notification>
    </Column>
    @for (int i = 0; i < 6; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size7">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size7</Notification>
    </Column>
    @for (int i = 0; i < 5; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size8">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size8</Notification>
    </Column>
    @for (int i = 0; i < 4; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size9">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size9</Notification>
    </Column>
    @for (int i = 0; i < 3; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size10">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size10</Notification>
    </Column>
    @for (int i = 0; i < 2; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size11">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size11</Notification>
    </Column>
    @for (int i = 0; i < 1; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>
    <Columns>

    <Column Size="Size.Size12">
        <Notification class="@B.TextCentered" Color="Color.Primary">Size.Size12</Notification>
    </Column>
    @for (int i = 0; i < 0; i++)
    {
        <Column>
            <Notification class="@B.TextCentered">1</Notification>
        </Column>
    }
    </Columns>

偏移(Offset)

你可以使用空列来创建一个水平空间的 Column 元素，你还可以在其上使用 Offset 属性:

视图
代码

Size.Half
Offset.OneQuarter

Size.ThreeFifths
Offset.OneFifth

Size.Size4
Offset.Offset8

Size.Size11
Offset.Offset1

<Columns IsMobile>
    <Column Size="Size.Half" Offset="Offset.OneQuarter">
        <Notification class="@B.TextCentered" Color="Color.Primary">
          Size.Half<br/>
          Offset.OneQuarter
          </Notification>
    </Column>
</Columns>
<Columns IsMobile>
    <Column Size="Size.ThreeFifths" Offset="Offset.OneFifth">
        <Notification class="@B.TextCentered" Color="Color.Primary">
          Size.ThreeFifths<br/>
          Offset.OneFifth
          </Notification>
    </Column>
</Columns>
<Columns IsMobile>
    <Column Size="Size.Size4" Offset="Offset.Offset8">
        <Notification class="@B.TextCentered" Color="Color.Primary">
          Size.Size4<br/>
          Offset.Offset8
          </Notification>
    </Column>
</Columns>
<Columns IsMobile>
    <Column Size="Size.Size11" Offset="Offset.Offset1">
        <Notification class="@B.TextCentered" Color="Color.Primary">
          Size.Size11<br/>
          Offset.Offset1
          </Notification>
    </Column>
</Columns>

窄列(Narrow column)

如果你需要一个指定空间的类，可以使用IsNarrow属性。其他类将填充剩余的空间。

视图
代码

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

<Columns>
    <Column IsNarrow>
        <Box style="width:200px">
            <Title Size="Size.Size5">Narrow column</Title>
            <Subtitle>This column is only 200px wide.</Subtitle>
        </Box>
    </Column>
    <Column>
        <Box>
            <Title Size="Size.Size5">Flexible column</Title>
            <Subtitle>This column will take up the remaining space available.</Subtitle>
        </Box>
    </Column>
</Columns>

对于尺寸属性，您可以为不同的断点设置窄列:

IsNarrowMobile
IsNarrowTablet
IsNarrowTouch
IsNarrowDesktop
IsNarrowWidescreen
IsNarrowFullhd

文档

尺寸列(Column sizes)

分别定义每个列的 尺寸(size)

12列栅格系统

偏移(Offset)

窄列(Narrow column)

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

分别定义每个列的尺寸(size)