容器(Container)

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

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

  • navbar
  • hero
  • section
  • footer

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

容器的表现形式是:

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

之所以选择 960, 1152 和 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>

流式容器(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>