您可以嵌套列，以便在设计中获得更大的灵活性。您只需遵循此结构
-
columns：顶级列容器-
列-
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>