Bulma CSS框架tile类相关疑问

嗨，我来帮你捋清楚这个问题～

没错，你观察得特别准！Bulma 确实曾经内置过tile组件，但在后续的版本迭代中，官方把这个组件从核心库中移除了。之前的tile组件是用来快速搭建响应式的瓦片/网格布局的，网上那些示例大多是基于旧版本的Bulma制作的，所以你现在搜还能看到不少这类代码。

至于替代方案，我给你几个思路：

• 如果一定要用原生的tile类，可以考虑使用Bulma的旧版本（比如v0.8.x系列），不过要注意旧版本可能缺少新特性和安全更新，权衡好再决定。
• 更推荐的是用Bulma现有布局工具复刻tile效果：比如用columns系统，或者结合is-flex、is-direction-vertical这类Flexbox相关类，再搭配notification、is-parent/is-child这些类，完全能实现和旧tile组件一样的布局效果。
• 还有不少社区维护的Bulma扩展插件，专门把tile组件重新加了回来，你可以找找这类资源来用。

附你提到的旧版本tile用法示例代码：

<div class="tile is-ancestor m-2">
  <div class="tile is-vertical is-8">
    <div class="tile">
      <div class="tile is-parent is-vertical">
        <article class="tile is-child notification is-primary">
          <p class="title">Vertical Tile...</p>
          <p class="subtitle">Top Tile</p>
        </article>
        <article class="tile is-child notification is-info">
          <p class="title">...Vertical Tile</p>
          <p class="subtitle">Bottom Tile</p>
        </article>
      </div>
      <div class="tile is-parent">
        <article class="tile is-child notification is-success">
          <p class="title">Middle Tile</p>
          <p class="subtitle">Middle Tile</p>
        </article>
      </div>
    </div>
    <div class="tile is-parent">
      <article class="tile is-child notification is-danger">
        <p class="title">Wide Tile</p>
        <p class="subtitle">Wide Tile</p>
      </article>
    </div>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <div class="content">
        <p class="title">Tall Tile</p>
        <p class="subtitle">Tall Tile</p>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse consequat vestibulum finibus. Nam fringilla urna sed dui aliquet pulvinar. Ut iaculis, lacus vitae posuere fringilla, quam tellus varius orci, nec.</div>
      </div>
    </article>
  </div>
</div>

内容来源于stack exchange