container 是一个简单的实用元素，允许你在较大的视口中居中内容。它可以在任何上下文中使用，但主要用作以下元素的直接子元素
导航栏英雄部分页脚
赞助商
容器
一个简单的容器，用于水平居中你的内容
概述 #
以下
1023px
|
桌面
介于 1024px 和 1215px 之间
|
宽屏
介于 1216px 和 1407px 之间
|
全高清
1408px 及以上
|
|
|---|---|---|---|---|
| 类别 | 最大宽度 |
|||
.container |
全宽 |
960px
|
1152px
|
1344px
|
.container.is-widescreen |
全宽 |
1152px
|
1344px
|
|
.container.is-fullhd |
全宽 |
1344px
|
||
.container.is-max-desktop |
全宽 |
960px
|
||
.container.is-max-widescreen |
全宽 |
960px
|
1152px
|
|
默认行为 #
默认情况下，container 仅从 $desktop 断点处激活。达到 $widescreen 和 $fullhd 断点后，它将增加其 max-width。
每个 断点 的容器的 宽度 是：$device - (2 * $gap)。$gap 变量的默认值为 32px，但可以修改。
容器的行为如下
- 在
$desktop上，它的最大宽度为 960px。 - 在
$widescreen上，它的最大宽度为 1152px。 - 在
$fullhd上，它的最大宽度为 1344px。
选择值 960、1152 和 1344 是因为它们既可以被 12 整除，也可以被 16 整除。
此容器在桌面及更大的视口中 居中。
<div class="container">
<div class="notification is-primary">
This container is <strong>centered</strong> on desktop and larger viewports.
</div>
</div>仅限宽屏或全高清 #
使用两个修饰符 is-widescreen 和 is-fullhd，你可以获得一个 全宽 容器 直到 那些特定断点。
此容器在
$widescreen 断点 之前 为 全宽。
<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>
此容器在
$fullhd 断点 之前 为 全宽。
<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>桌面和宽屏最大宽度 #
有时，你可能希望在较大的视口中使用 窄 容器。这就是 Bulma 提供 2 个修饰符的原因
.container.is-max-desktop将表现得像一个桌面容器.container.is-max-widescreen将表现得像一个宽屏容器
此容器在宽屏和全高清上的
max-width 为 $desktop - $container-offset。
<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>
此容器在全高清上的
max-width 为 $widescreen - $container-offset。
<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>绝对最大宽度 #
如果你想更改所有容器的最大宽度，你可以通过更新 Sass 变量 $container-max-width 的值来实现。
默认情况下，$fullhd 断点值用于计算 container 的绝对最大宽度。只需将其更改为较小的值，如 $widescreen、$desktop 或像素中的任何值。
流式容器 #
如果你不想设置最大宽度，但想保留左右两侧的 32px 边距，请添加 is-fluid 修饰符
此容器是流式的：它将在任何视口大小上在两侧留出 32px 的间隙。
<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>|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
Sass 和 CSS 变量 #
|
Sass 变量
|
CSS 变量
|
值
|
|---|---|---|
|
|
|
|
|
|