您可以嵌套列以在设计中获得更大的灵活性。 您只需要遵循此结构
-
columns：顶层列容器-
column-
columns：嵌套列column等等...
-
-
与 多行列 的区别在于 HTML 代码中的顺序：所有蓝色列出现在红色列之前。 调整到更窄的视口以查看结果。
赞助
嵌套列
构建响应式列的简单方法
第一列
第一个嵌套列
第二个嵌套列
第二列
50%
自动
自动
多行列在每个行之间也会有间距。
<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>
