Bulma Vue

BulmaのColumnsを設定しているページで、Columnがモバイルではみ出す件(対処法あり)

原因

Columnの番号によって、Gapが違うから。

• 一番左のカラムは、左側にGapが設定されていないけど、右側には設定されている
• 2番目から最後の直前のカラムには両側にGapが設定されている
• 最後のカラムには右側にGapが設定されていないけど、左側には設定されている。

このデフォルトの状態で、Columnsをモバイル表示しようとすると、やや真ん中からずれたり、場合によってはviewportからはみ出して謎に横スクロールできる状態になります。

対処方法

回避するには、ドキュメントのページにかかれています。viewportによって、カラムのGapを変えるというもの。

columnsのクラスに「.is-variable .is-0-mobile」のふたつを追加すれば、ちぐはぐが解消されます。