嵌套列

构建自适应列的简单方式

您可以通过嵌套列来实现更加富有弹性变化的设计。您只需遵从结构：

columns: 顶级列容器
- column
  - columns: 嵌套列
    - column 依此类推……

不同于多行列的是 HTML 代码的顺序：所有蓝色列会出现在红色列之前。调小窗口查看结果。

First column

First nested column

Second nested column

Second column

50%

Auto

多行列在不同的行之间还会有间隙。

<div class="columns">
  <div class="column">
    <p class="bd-notification is-info">First column</p>
    <div class="columns is-mobile">
      <div class="column">
        <p class="bd-notification is-info">First nested column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-info">Second nested column</p>
      </div>
    </div>
  </div>
  <div class="column">
    <p class="bd-notification is-danger">Second column</p>
    <div class="columns is-mobile">
      <div class="column is-half">
        <p class="bd-notification is-danger">50%</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Auto</p>
      </div>
    </div>
  </div>
</div>