[Bulma] columnsを使うとmobileの時に出る水平スクロールバーを消す

columns の margin が原因で、モバイル端末では以下のように水平スクロールバーが表示されてしまいました。不要なので、is-variable is-0-mobile を使用して消しました。

環境

• Bulma 0.9.0
• Chrome 84.0.4147.135

結論

<div class="columns is-variable is-0-mobile">
  <div class="column">
  </div>
</div>

is-variable is-0-mobileを追加して対応しました。

理由

• モバイルの時は、column を水平配置するレイアウトを使用していなかった。(左右marginが不要)
• モバイルの時だけ水平スクロールが出て問題だったので、モバイル以外に影響を出さないように指定した。
• 他に簡単でベストな解決法が分からなかったざこ故。

感謝

• 同様の問題 - https://github.com/jgthms/bulma/issues/1540#issuecomment-512969132
• 公式 - Columns gap | Bulma: Free, open source, and modern CSS framework based on Flexbox