container
是一个简单的工具元素(允许您在大的视口中居中内容)。它可用于任何内容,但主要做为下列元素的直系子元素:
navbar
hero
section
footer
容器(Container)
一个简单的 container 可以从说明方向居中您的内容
container
是一个简单的工具元素(允许您在大的视口中居中内容)。它可用于任何内容,但主要做为下列元素的直系子元素:
navbar
hero
section
footer
不超过
1023px
|
桌面系统
从 1024px 到 1215px
|
宽屏
从 1216px 到 1407px
|
巨屏
1408px 及以上
|
|
---|---|---|---|---|
类 | max-width |
|||
.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
断点时激活。它会延伸其 max-width
直到达到 $widescreen
和 $fullhd
断点。
对于每一个断点的容器宽度是:$device - (2 * $gap)
。$gap
变量默认是 32px
,但是可以修改。
容器将如何操作呢?
$desktop
上它的最大宽度为 960px$widescreen
上它的最大宽度为 1152px。$fullhd
上它的最大宽度为 1344px。值 960、1152 和 1344 之所以被选中是因为它们都可以同时被 12 和 16 均分。
使用 is-widescreen
和 is-fullhd
修饰符,您将得到一个全屏宽度容器直到特定断点。
$widescreen
breakpoint.
$fullhd
breakpoint.
有时,您可能在大的视口上想要一个窄宽度容器,所以 Bulma 提供了 2 修饰符:
.container.is-max-desktop
如桌面系统容器显示
.container.is-max-widescreen
如宽屏容器显示
max-width
of $desktop - $container-offset
on widescreen and fullhd.
max-width
of $widescreen - $container-offset
on fullhd.
如果您想要改变所有容器的最大宽度,您可以通过更新 Sass 变量 $container-max-width
的值来完成。
默认情况下,$fullhd
断点值用于计算 container
的 绝对最大宽度值。只要更改它为一个小一点的值例如 $widescreen
、$desktop
或者任何其他以 pixels 计算的值即可。
如果您不想使用最大宽度值但是想要保持左右边界 32px 的边距,添加 is-fluid
修饰符即可:
此页面为开放源码页面。
发现排版问题?或者表达模糊?
在 GitHub 改进该页内容