Question

我正在尝试使用bulma css进行布局，并且在768中断后正在制作1列布局，这是平板电脑模式，此时应该是4列布局，在这里不是这种情况。因此，我如何才能将列布局制作为3列布局，然后变成2列布局，然后是移动版的一列布局。

我已经尝试了一些谷歌搜索甚至堆栈溢出，但是我无法解决该问题。我也尝试在列顶部给出部分，但没有成功。

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

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

我从4列布局转到1列布局，应该是4列布局，然后是3列布局，然后是2列，然后是1列布局。编辑：我想使其与wordpress一起使用，但如果无法解决此问题，我将无法使用。

Answer 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中来使其工作

在768点应该为平板电脑设备配置2列布局后，如何解决bulma css制作单列布局的问题？

1 个答案: