デザインの柔軟性を高めるために、カラムをネストできます。この構造に従うだけで済みます。
-
columns: 最上位のカラムコンテナ-
column-
columns: ネストされたカラムcolumnなど…
-
-
複数行のカラムとの違いは、HTMLコードの順序です。すべての青いカラムは、赤いカラムの前に表示されます。狭いビューポートにリサイズして結果を確認してください。
スポンサー
ネストされたカラム
レスポンシブなカラムを構築する簡単な方法
最初のカラム
最初のネストされたカラム
2番目のネストされたカラム
2番目のカラム
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>