容器(Container)

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

The container is a simple utility element that allows you to center content on larger viewports. It can be used in any context, but mostly as a direct child of one of the following:

  • navbar
  • hero
  • section
  • footer

Overview #

Below
1023px
Desktop
Between 1024px and 1215px
Widescreen
Between 1216px and 1407px
FullHD
1408px and above
Class max-width
.container Full width 960px 1152px 1344px
.container.is-widescreen Full width 1152px 1344px
.container.is-fullhd Full width 1344px
Since 0.9.1
.container.is-max-desktop Full width 960px
.container.is-max-widescreen Full width 960px 1152px

Default behavior #

By default, the container will only be activated from the $desktop breakpoint. It will increase its max-width after reaching the $widescreen and $fullhd breakpoints.

对于不同断点的容器宽度是: $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>

Widescreen or FullHD only #

With the two modifiers is-widescreen and is-fullhd, you can have a fullwidth container until those specific breakpoints.

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>

Desktop and Widescreen maximum widths #

Since 0.9.1

Sometimes, you might want a narrow container on larger viewports. That's why Bulma provides 2 modifiers:

  • .container.is-max-desktop will behave like a desktop container
  • .container.is-max-widescreen will behave like a widescreen container
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>

Absolute maximum width #

If you want to change the maximum width of all containers, you can do so by updating the values of the $container-max-width Sass variable.

By default, the $fullhd breakpoint value is used to calculate the absolute maximum width of the container. Simply change it to a smaller value like $widescreen, $desktop, or any value in pixels.

Fluid container #

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the is-fluid modifier:

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>

Variables #

Name
Type
Value
Computed Value
Computed Type
$container-offset
compound
(2 * $gap)
$container-max-width
variable
$fullhd
1344px + (2 * $gap)
computed