嵌套列(Nesting columns)

构建 响应式列(responsive columns)的简单方式

你只要遵循以下结构，就可以在你的设计中灵活的嵌套列:

  • columns: 顶层列容器
    • column
      • columns: 嵌套列
        • column 等等...

与 多行 列布局 不同的是 HTML 代码的顺序 : 所有的 blue 列 将会出现在 red 列之前. 整为更窄的视口以查看结果。

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

多行列在每行之间也会有一个间隙(gap)。 

<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>