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