容器(Container)

一个简单的 container 可以从说明方向居中您的内容

container 是一个简单的工具元素(允许您在大的视口中居中内容)。它可用于任何内容,但主要做为下列元素的直系子元素

  • navbar
  • hero
  • section
  • footer

概览 #

不超过
1023px
桌面系统
1024px1215px
宽屏
1216px1407px
巨屏
1408px 及以上
max-width
.container 全屏宽度 960px 1152px 1344px
.container.is-widescreen 全屏宽度 1152px 1344px
.container.is-fullhd 全屏宽度 1344px
Since 0.9.1
.container.is-max-desktop 全屏宽度 960px
.container.is-max-widescreen 全屏宽度 960px 1152px

默认行为 #

默认情况下,container 只有在宽度大于 $desktop 断点时激活。它会延伸其 max-width 直到达到 $widescreen$fullhd 断点。

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

容器将如何操作呢?

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

96011521344 之所以被选中是因为它们都可以同时被 1216 均分。

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>

仅限宽屏或巨屏 #

使用 is-widescreenis-fullhd 修饰符,您将得到一个全屏宽度容器直到特定断点。

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>

桌面系统和宽屏最大宽度 #

Since 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>

绝对最大宽度 #

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

默认情况下,$fullhd 断点值用于计算 container绝对最大宽度值。只要更改它为一个小一点的值例如 $widescreen$desktop 或者任何其他以 pixels 计算的值即可。

流体容器 #

如果您不想使用最大宽度值但是想要保持左右边界 32px 的边距,添加 is-fluid 修饰符即可:

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

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!