如何在较小的屏幕上水平对齐 Bulma 的关卡项目？答案

【问题标题】：How can I align Bulma's level items horizontally on smaller screens?如何在较小的屏幕上水平对齐 Bulma 的关卡项目？
【发布时间】：2017-11-03 10:39:54
【问题描述】：

我网站的页脚包含level 布局，左右部分根据Bulma docs。在大屏幕上这很好。

但在较小的屏幕上，右侧部分的所有项目都会垂直堆叠。而我希望它们水平对齐并居中，如下图所示。

【问题讨论】：

"默认情况下，出于空间考虑，移动设备上的关卡是垂直的。如果您希望移动设备上的关卡也是水平的，请在level 上添加is-mobile 修饰符容器。”
@jonrsharpe 我知道is-mobile 修饰符，但这适用于完整的level。我会想到类似 is-mobile 的修饰符仅用于正确的级别，例如class="level-right is-mobile" 但据我所知，这并不存在。
在这种情况下，我认为您必须在自己的 CSS 中更新 level-right 元素，或者从 anchor 元素中删除 level-item 类。

标签： css bulma

【解决方案1】：

这里有 2 个选项。

选项 1

将.is-mobile 修饰符添加到.level，然后添加一些额外的CSS 到堆栈.level-left 和.level-right。

.level.is-mobile {
  flex-direction: column;
}

或者，将.is-flex-mobile 修饰符添加到level-right，并添加额外的CSS 来覆盖justify-content 属性：

.level-right.is-flex-mobile {
  justify-content: center;
}

【讨论】：