容器（Container）

一个简单的 container 可以从说明方向居中您的内容

container 是一个简单的工具元素（允许您在大的视口中居中内容）。它可用于任何内容，但主要做为下列元素的直系子元素：

navbar
hero
section
footer

概览 #

	不超过 `1023px`	桌面系统从 `1024px` 到 `1215px`	宽屏从 `1216px` 到 `1407px`	巨屏 `1408px` 及以上
类	`max-width`
`.container`	全屏宽度	`960px`	`1152px`	`1344px`
`.container.is-widescreen`	全屏宽度		`1152px`	`1344px`
`.container.is-fullhd`	全屏宽度			`1344px`
Since 0.9.1
`.container.is-max-desktop`	全屏宽度	`960px`
`.container.is-max-widescreen`	全屏宽度	`960px`	`1152px`

默认行为 #

默认情况下，container 只有在宽度大于 $desktop 断点时激活。它会延伸其 max-width 直到达到 $widescreen 和 $fullhd 断点。

对于每一个断点的容器宽度是：$device - (2 * $gap)。$gap 变量默认是 32px，但是可以修改。

容器将如何操作呢？

在 $desktop 上它的最大宽度为 960px
在 $widescreen 上它的最大宽度为 1152px。
在 $fullhd 上它的最大宽度为 1344px。

值 960、1152 和 1344 之所以被选中是因为它们都可以同时被 12 和 16 均分。

This container is centered on desktop and larger viewports.

<div class="container">
  <div class="notification is-primary">
    This container is <strong>centered</strong> on desktop and larger viewports.
  </div>
</div>

仅限宽屏或巨屏 #

使用 is-widescreen 和 is-fullhd 修饰符，您将得到一个全屏宽度容器直到特定断点。

This container is fullwidth until the $widescreen breakpoint.

<div class="container is-widescreen">
  <div class="notification is-primary">
    This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
  </div>
</div>

This container is fullwidth until the $fullhd breakpoint.

<div class="container is-fullhd">
  <div class="notification is-primary">
    This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
  </div>
</div>

桌面系统和宽屏最大宽度 #

Since 0.9.1

有时，您可能在大的视口上想要一个窄宽度容器，所以 Bulma 提供了 2 修饰符：

.container.is-max-desktop 如桌面系统容器显示
.container.is-max-widescreen 如宽屏容器显示

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

<div class="container is-max-desktop">
  <div class="notification is-primary">
    This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
  </div>
</div>

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

<div class="container is-max-widescreen">
  <div class="notification is-primary">
    This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
  </div>
</div>

绝对最大宽度 #

如果您想要改变所有容器的最大宽度，您可以通过更新 Sass 变量 $container-max-width 的值来完成。

默认情况下，$fullhd 断点值用于计算 container 的绝对最大宽度值。只要更改它为一个小一点的值例如 $widescreen、$desktop 或者任何其他以 pixels 计算的值即可。

流体容器 #

如果您不想使用最大宽度值但是想要保持左右边界 32px 的边距，添加 is-fluid 修饰符即可：

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

<div class="container is-fluid">
  <div class="notification is-primary">
    This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
    viewport size.
  </div>
</div>