Bootstrap4で全ブラウザ対応する方法 #HTML

この記事はBootstrap4 alpha2版を元にした記事です。

この記事は何?

Bootstrap4でFlexboxを利用するとIEとFirefoxで表示が崩れるので修正方法をメモします。

Flexboxを利用する方法

Bootstrap4からFlexboxに対応しています。現状はオプションなので、sassの設定を書き換えコンパイルすることで使えるようになります。

利用方法はこちらのサイトなどが一番わかりやすいと思います。
Bootstrap 4 alphaでCSS3のFlexboxを試す！

IEの対応

IEではカラム落ちが発生します。Bootstrap4のgithub上でもバグ報告されています。おそらく次のバージョンぐらいでは修正されていますが、alpha版で導入をされる場合は以下を修正してください。

_grid.sassファイルを開きます。場所はこちらです。
bootstrap-4.0.0-alpha.2/scss/mixins/_grid.sass

46行目あたりにcol-xx のスタイル設定があります。

@mixin make-col-span($size, $columns: $grid-columns) {
  @if $enable-flex {
    flex: 0 0 percentage($size / $columns);
  } @else {
    width: percentage($size / $columns);
  }
}

これに、「flex-basis」と「max-width」の記述を追加します。

@mixin make-col-span($size, $columns: $grid-columns) {
  @if $enable-flex {
    flex: 0 0 percentage($size / $columns);
    flex-basis: percentage($size / $columns);
    max-width: percentage($size / $columns);
  } @else {
    width: percentage($size / $columns);
  }
}

これで完了です。grutを起動してコンパイルしてください。
IEで確認すると、カラム落ちが解消されていると思います。

Firefoxの画像対応

Fluid Imageを設定にする場合、新しいクラス「img-fluid」を指定しますが
Firefoxではこのままではブラウザにあわせてリサイズしないので、自作のcssに

.img-fluid {
  width: 100%;
}

を加えてください。これが一番簡単に修正できる方法かと思います。
IEの修正のように、sassファイルに記述してもよいです。お好みの方法でどうぞ。

Chrome、Firefox、IE、Safariは最新版で崩れはなかったです。
iOS9、Android4.4、4.5(xperia)ではOKでした。