容器

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

.container 类可以在任何情况下使用，但是一般用于以下 子元素：

.navbar
.hero
.section
.footer

容器的宽度将会取决于每个断点：$device - (2 * $gap). $gap 变量默认值是 32px ，但是可以被修改。

容器的表现形式是：

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

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

This container is centered on desktop.

<div class="container">
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>

流体容器

如果您不想限制最大宽度，并且希望保留左右的 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">
    This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
    viewport size.
  </div>
</div>

断点容器

你可以添加 .is-widescreen 和 .is-fullhd 两个修饰符，在断点之前获得全宽的容器。

This container is fullwidth until the $widescreen breakpoint.

<div class="container is-widescreen">
  <div class="notification">
    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">
    This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
  </div>
</div>

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

容器

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

流体容器

断点容器

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