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

流式容器(Fluid container) #

如果您不想限制最大宽度,并且希望保留左右的 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>

断点容器(Breakpoint containers) #

你可以添加 is-widescreenis-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>