如何在较小的屏幕上水平对齐布尔玛的关卡项目？

Question

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

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

请看这个例子：https :
//codepen.io/anon/pen/aVdPPy

Answer 1

您在这里有 2 个选择。

选项1

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

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

选项 2

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

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