如何修复bulma css在768点中断后制作单列布局，平板设备应该是2列布局？答案

【问题标题】：How to fix bulma css making single column layout after breaking at point of 768 where it should have been 2 column layout for tablet devices?如何修复bulma css在768点中断后制作单列布局，平板设备应该是2列布局？
【发布时间】：2019-03-23 11:16:34
【问题描述】：

我正在尝试使用 bulma css 进行布局，它在 768 处中断后进行 1 列布局，这是平板电脑模式，此时应该是 4 列布局，但这里不是这种情况。那么我如何将一个列布局变成可能的 3 列布局，然后变成 2 列布局，然后变成一个用于移动设备的列布局。

我尝试了一些谷歌搜索甚至堆栈溢出，但我无法解决问题。我也尝试在列的顶部给出部分，但没有奏效。

这是bulma css网站的基本列代码，不是我想要的。

第一栏第二栏第三栏第四栏

我从 4 列布局变为 1 列布局，应该是 4 列布局，然后是 3 列布局，然后是 2 列，然后是 1 列布局。编辑：我想让它与 wordpress 一起工作，但如果我不能解决这个问题，我就不能。

【问题讨论】：

请向我们展示您目前的代码。
谢谢@aidi 我已经成功了:)，我会在这里发布答案

标签： css flexbox bulma

【解决方案1】：

我已经建立了解决方案，并且这段代码对我来说运行良好，并且我希望它能够正常运行。

<div class="columns is-multiline  is-variable is-4">

    <div class="column is-4">
<div class=" ">

    <div class="card-image">
        <figure class="image is-4by3">
            <img src="myImage" alt="Placeholder image">
        </figure>
    </div>

    <p class="subtitle is-3 card-content has-text-centered">Subtitle 3</p>
    <p class="card-footer-item">hyee</p>
</div>
        <hr >
    </div>

</div>

我已经通过将相同的结构以相同的顺序但 wordpress 方式使其在 wordpress 中工作

【讨论】：