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

Question

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

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

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

Answer 1

这里有2个选项。

选项1

将.is-mobile修饰符添加到.level，然后将一些额外的CSS添加到堆栈.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;
}