时间戳

首页 > 解决方案 > 布尔玛瓷砖不默认为水平

css - 布尔玛瓷砖不默认为水平

问题描述

根据瓷砖上的布尔玛文档（https://bulma.io/documentation/layout/tiles/），我希望以下内容会产生两行水平行，每行两行图像。相反，它会生成一行四幅垂直图像，第一幅和第二幅以及第三幅和第四幅彼此之间的距离更近一些。

    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

我能够通过强制 div 获得我想要的行为display: flex（is-parent实际上，这是我期望的类，而不是display: blockBulma 设置的类），但我的理解是 Bulma 瓷砖应该默认水平布局。我错了，还是做错了什么？

非常感谢。

标签： cssbulma

解决方案

这样做的正确方法是用 class 定义两个 div is-ancestor：

    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image1.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image2.svg"></div>
        </div>
    </div>
    <div class="tile is-ancestor">
        <div class="tile is-parent">
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image3.svg"></div>
            <div class="tile is-child"><img src="{{ site.baseurl }}/res/img/image4.svg"></div>
        </div>
    </div>

推荐阅读