Bulma CSS 列在移动设备上反转答案

【问题标题】：Bulma CSS columns reversed on mobileBulma CSS 列在移动设备上反转
【发布时间】：2021-08-19 08:50:46
【问题描述】：

我有一条线，我希望 Bulma CSS 列围绕它充当“树”上的“叶子”。
我用<div> 元素从上到下实现了这一点，每列有两列，因此它们占据了屏幕的左侧和右侧。然后文本左/右对齐。
顶部的 4 个按钮应该在右侧，底部的 4 个在左侧。

这是我的意思的图形：
Working on Desktop

但是，当屏幕宽度变得太小（即移动浏览器）时，列会中断，并且似乎文本对齐方式颠倒了：
Broken on mobile

我的格式本质上是：

//div structure for a top right "leaf"

<div class="columns">
    <div class="column"></div> //empty left side column
    <div class="column">
        <button class="button"> Hello </button>
    </div>
</div>

//empty column divs in the middle section for spacing
...

//div structure for a bottom left "leaf"
<div class="columns">
    <div class="column has-text-right">
        <button class="button">Hello</button>
    </div>
        <div class="column"></div> //empty right side column
</div>

知道为什么会这样吗？

如果有帮助，这里是我为这棵树的非常重复的 CSS 结构的屏幕截图。 Tree divs

【问题讨论】：

标签： javascript html css bulma

【解决方案1】：

这是因为默认情况下，Bulma 中的列在移动设备上未激活（最多 768px，Bulma 中的不同大小在 the documentation 中可见），因此它们相互堆叠。

解决方案是将 is-mobile 类添加到您的 columns 容器中，以便您的示例如下所示：

//div structure for a top right "leaf"

<div class="columns is-mobile">  // is-mobile class added
    <div class="column"></div> //empty left side column
    <div class="column">
        <button class="button"> Hello </button>
    </div>
</div>

//empty column divs in the middle section for spacing
...

//div structure for a bottom left "leaf"
<div class="columns is-mobile">  // is-mobile class added
    <div class="column has-text-right">
        <button class="button">Hello</button>
    </div>
        <div class="column"></div> //empty right side column
</div>

您可以查看this part of the documentation了解有关移动列的更多详细信息。

【讨论】：