container 是一个简单的实用元素，允许你在更大的视口上 居中 内容。 它可以在任何上下文中使用，但主要作为以下项目的 直接子元素
navbarherosectionfooter
赞助
容器
一个简单的 容器，用于水平居中你的内容
概述 #
下方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 提供 3 个修饰符类的原因
-
.container.is-max-tablet的行为类似于平板电脑容器 -
.container.is-max-desktop的行为类似于桌面容器 -
.container.is-max-widescreen的行为类似于宽屏容器
此容器的
max-width 为 $tablet - $container-offset。<div class="container is-max-tablet">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$tablet - $container-offset</code>.
</div>
</div>在宽屏和全高清上，此容器的
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>绝对最大宽度 #
如果要更改 所有 容器的最大宽度，可以通过更新 $container-max-width Sass 变量的值来实现。
默认情况下，$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 变量
|
值
|
|---|---|
|
|
|
|
