Bulma 的每个元素都是移动设备优先，而且为竖屏阅读做过优化，所以默认为使用移动设备：
columns会竖向堆叠level组件会竖向堆叠显示其子元素nav菜单会隐藏
您可以通过添加 is-mobile 修饰符强制 columns 或 level 横向（horizontal）布局。
自适应
Bulma 是移动设备优先的框架
默认竖屏 #
断点 #
Bulma 使用 4 个断点定义了 5 个屏幕尺寸：
mobile: 上限到768pxtablet: 从769px开始desktop: 从1024px开始widescreen: 从1216px开始fullhd: 从1408px开始
利用这些断点，Bulma 提供了 9 种自适应混入。
|
移动设备 上限到 768px
|
平板 在 769px 到 1023px 之间
|
桌面系统 在 1024px 到 1215px 之间
|
宽屏 在 1216px 到 1407px 之间
|
巨屏1408px 及以上
|
|---|---|---|---|---|
|
移动设备 |
- |
|||
|
- |
平板 |
|||
|
- |
桌面系统 |
|||
|
- |
宽屏 |
|||
|
- |
巨屏 |
|||
|
- |
仅平板 |
- |
||
|
- |
仅桌面 |
- |
||
|
- |
仅宽屏 |
- |
||
|
触屏 |
- |
|||
|
宽屏以下 |
- |
|||
|
巨屏以下 |
- |
|||
为了简化这些断点的使用， Bulma 提供了易用自适应混入。
禁用断点 #
默认情况下，$widescreen 和 $fullhd 断点是 启用的。您可以通过设置相关 Sass 的 boolean 值为 false 来禁用：
// Disable the widescreen breakpoint
$widescreen-enabled: false
// Disable the fullhd breakpoint
$fullhd-enabled: falseVariables #
Name
Type
Value
Computed Value
Computed Type
$gapsize
32px$tabletsize
769px$desktopcomputed
960px + (2 * $gap)$widescreencomputed
1152px + (2 * $gap)$fullhdcomputed
1344px + (2 * $gap)
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
