代码之家  ›  专栏  ›  技术社区  ›  BugHunterUK

Bulma-瓦片未进入下一行

  •  1
  • BugHunterUK  · 技术社区  · 6 年前

    我正在尝试为pintrest类型的布局创建多行平铺。我遇到的问题是瓷砖是水平放置的,离开了页面。我要把他们带到下一行。我好像什么也找不到 the docs :

    这是我的代码(复制自文档)。这些项目将实际插入。

    <div class="tile is-ancestor">
        <div class="tile is-parent">
          <div class="tile is-child card is-6">
            <p class="title">One</p>
          </div>
          <div class="tile is-child card is-6">
            <p class="title">Two</p>
          </div>
          <div class="tile is-child card is-6">
            <p class="title">Three</p>
          </div>
          <div class="tile is-child card is-6">
            <p class="title">Four</p>
          </div>
        </div>
      </div>
    

    我试过了 is-multiline 但似乎不起作用。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Sujil Maharjan    6 年前

    问题的原因是您正在分配 is-6

    我不认为Tile是解决方案,因为它是使用flex的,你想要的是能够控制溢出。

    1. 只需创建一个 div 并以列表的形式显示你的“瓷砖” display: inline-block
    2. 删除 is-6标准 它将所有n个平铺显示在同一行中。
        2
  •  2
  •   Illia Kuzma    3 年前

    在我的例子中,我不想用 is-..

    <div class="tile is-ancestor is-flex-wrap-wrap">