容器(Container)

一个简单的容器,水平居中您的内容

容器是一个简单的实用程序元素,允许您将内容集中在较大的视口中。它可以在任何上下文中使用,但大多数情况下是以下内容之一的直接子级:

  • navbar导航栏
  • hero英雄旗帜广告
  • section
  • footer页脚

概述 #

以下
1023px
桌面
Between 1024px and 1215px
宽屏幕
Between 1216px and 1407px
高清
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
New! 0.9.1
.container.is-max-desktop Full width 960px
.container.is-max-widescreen Full width 960px 1152px

默认行为 #

默认情况下,容器将仅从$desktop断点激活。在达到$widescreen和$fullhd断点后,它将增加其最大宽度。

每个断点的容器宽度是:$device-(2*$gap)的结果。$gap变量的默认值为32px,但可以修改。

下面就是容器的行为方式:

  • 在$desktop上,它的最大宽度为960px。
  • 在$widescreen上,它的最大宽度为1152px。
  • 在$fullhd上,它的最大宽度为1344px。

选择值960、1152和1344是因为它们可以被12和16整除。

此容器集中在桌面和较大的视口上。
<div class="container">
    <div class="notification is-primary">
    此容器集中在桌面和较大的视口上。
    </div>
  </div>

仅限宽屏或全高清 #

如果用is-widescreenis-fullhd这两个修饰符,那么您可以拥有一个fullwidth容器,直到那些特定的断点。

在$widescreen断点之前,此容器是全屏的。
<div class="container is-widescreen">
    <div class="notification is-primary">
    在$widescreen断点之前,此容器是全屏的。
    </div>
  </div>
在$fullhd断点之前,此容器是全宽的。
<div class="container is-fullhd">
    <div class="notification is-primary">
    在$fullhd断点之前,此容器是全宽的。
    </div>
  </div>

桌面和宽屏最大宽度 #

New! 0.9.1

有时,可能需要在较大的视口上使用窄容器。这就是Bulma提供2个修饰符的原因:

  • .container.is-max-desktop行为类似于桌面容器
  • .container.is-max-widescreen行为类似于宽屏容器
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>

绝对最大宽度 #

如果要更改所有容器的最大宽度,可以更新 $container-max-width Sass变量的值。

默认情况下,$fullhd断点值用于计算容器的绝对最大宽度。只需将其更改为较小的值,如$widescreen、$desktop或任何像素值。

流式容器 #

如果不希望具有最大宽度,但希望在左右两侧保留32px边距,请添加is-fluid 修改符:

这个容器是流体:在任何视口大小上,它的两边都有一个32px的间隙。
<div class="container is-fluid">
    <div class="notification is-primary">
    这个容器是流体:在任何视口大小上,它的两边都有一个32px的间隙。
    </div>
  </div>

Variables #

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

返回头部

问题反馈
返回顶部