BulmaRazor

容器(Container)

一个可以内容水平居中的简单容器

Container是一个简单的实用组件，可让您将内容集中在较大的视口上。它可以在任何上下文中使用，但主要用作以下组件的子代：

Navbar
Hero
Section
Footer

无论有多少列，他们的宽度将会均分.

概述

	Below `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
属性	`max-width`
`--`	Full width	`960px`	`1152px`	`1344px`
`IsWidescreen`	Full width		`1152px`	`1344px`
`IsFullhd`	Full width			`1344px`
New! 0.9.1
`IsMaxDesktop`	Full width	`960px`
`IsMaxWidescreen`	Full width	`960px`	`1152px`

默认行为

默认情况下，Container只会从 Desktop断点激活。达到Widescreen和Fullhd断点后，它将增加其max-width。

对于不同断点的容器宽度是: $device - (2 * $gap). $gap 变量的值是 32px ，不过他是可以修改的(通过bulma.css)

Container的表现形式是:

$desktop 容器最大的宽度是 960px.
$widescreen 容器最大的宽度是 1152px.
$fullhd 容器最大的宽度是 1344px.

之所以选择 960, 1152 和 1344 ，是因为他们能被 12 和 16 整除

视图
代码

This container is centered on desktop and larger viewports.

<div class="has-background-light my-2">
    <Container>
        <Notification Color="Color.Primary">
            This container is <strong>centered</strong> on desktop and larger viewports.
        </Notification>
    </Container>
</div>

仅宽屏或全高清

使用IsWidescreen和IsFullhd属性，可以使Container在$device断点没有达到指定宽度的时候呈现100%的宽度

视图
代码

This container is fullwidth until the $widescreen breakpoint.

<div class="has-background-light my-2">
    <Container IsWidescreen>
        <Notification Color="Color.Primary">
            This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
        </Notification>
    </Container>
</div>

视图
代码

This container is fullwidth until the $fullhd breakpoint.

<div class="has-background-light my-2 is-fullwidth">
    <Container IsFullhd>
        <Notification Color="Color.Primary">
            This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
        </Notification>
    </Container>
</div>

Desktop and Widescreen maximum widths

New1 0.9.1

有时候，你可能想在宽屏上要一个狭窄的Container，可以通过两个属性来控制：

IsMaxDesktop 行为表现为Desktop下的Container
IsMaxWidescreen 行为表现为Widescreen下的Container

视图
代码

This container has a max-width of $desktop - $container-offset on widescreen and fullhd.

<div class="has-background-light my-2 is-fullwidth">
    <Container IsMaxDesktop>
        <Notification Color="Color.Primary">
            This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
        </Notification>
    </Container>
</div>

视图
代码

This container has a max-width of $widescreen - $container-offset on widescreen and fullhd.

<div class="has-background-light my-2 is-fullwidth">
    <Container IsMaxWidescreen>
        <Notification Color="Color.Primary">
            This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on widescreen and fullhd.
        </Notification>
    </Container>
</div>

Fluid container

如果您不希望有最大宽度，但想在左侧和右侧保持32px的空白，请添加IsFluid属性：

视图
代码

This container is fluid: it will have a 32px gap on either side, on any viewport size.

<div class="has-background-light my-2 is-fullwidth">
    <Container IsFluid>
        <Notification Color="Color.Primary">
            This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any viewport size.
        </Notification>
    </Container>
</div>

文档