Bulma CSS 列在移动设备上颠倒

Question

我有一条线，我希望 Bulma CSS 列充当“树”上的“叶子”。
我用 <div> 个元素从上到下实现了这一点，每个元素有两列，因此它们占据了屏幕的左侧和右侧。然后文本 left/right 对齐。
顶部的 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

Answer 1

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

解决方案是将 is-mobile class 添加到您的 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 了解有关移动列的更多详细信息。

Bulma CSS 列在移动设备上颠倒

Bulma CSS columns reversed on mobile

html

javascript

css

bulma