当宽度窄时,使列在布尔玛中垂直堆叠吗?

时间:2018-07-22 19:35:58

标签: html css bulma

以下是我的网站的一部分。应该做的是在有足够的宽度时创建两个并排区域。否则,这些区域应相互堆叠。

<body>
    <div id="tab-container" class="tabs is-centered is-small is-fullwidth is-marginless is-paddingless">
        <ul>
            <li id="1" class="is-active">
                <a>1</a>
            </li>
            <li id="2">
                <a>2</a>
            </li>
            <li id="3">
                <a>3</a>
            </li>
            <li id="4">
                <a>4</a>
            </li>
            <li id="5">
                <a>5</a>
            </li>
        </ul>
    </div>

    <div class="columns is-paddingless is-marginless" style="background: yellow;">
            <div class="column is-paddingless is-half" style="background: indigo">
            </div>
            <div class="column is-paddingless is-half" style="background: black">
            </div>
        </div>

</body>

当宽度足够时,网站看起来正常:

enter image description here

但是,当我收缩网站时-过渡到堆叠模式时-黑色和紫色区域消失了。

enter image description here

我该如何解决?

0 个答案:

没有答案