IE8+Bootstrap3で横幅いっぱいに広げる

結論

IE8+Bootstrap3の組み合わせで、ウィンドウ横幅いっぱいのレイアウトにしたい場合、containerクラスを使って以下のCSSを適用すればよい。

/* 幅いっぱいにする設定 */
.container {
  width: auto;
}

/* 幅いっぱいにする設定(IE8対応用) */
@media (min-width: 768px) {
    width: auto;
  }
}
@media (min-width: 992px) {
  .container {
    width: auto;
  }
}
@media (min-width: 1200px) {
  .container {
    width: auto;
  }
}

経緯

twitter bootstrap 3 で横幅をめいっぱい広げたいとき at softelメモを参考に、bootstrap.cssのあとで読み込むCSSファイル中で、

.container {
  width: auto;
}

を追加した。IE8以外のブラウザでは期待通りの挙動になった。(上記記事には、Bootstrap 3.0.1でこの方法が利くと書いてあったが、3.0.0でうまくいった。)

しかし、IE8ではうまくいかない。responds.jsが原因。上記のCSSでは、bootstrap.cssの中のcontainerの横幅を指定している部分(↓)を上書きしているが、responds.jsがそれを元に戻してしまう。

このあたり:

bootstrap.css

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

responds.jsは、CSS3のMedia Queriesを解釈してJavaScriptでそれをMedia Queries非対応ブラウザ(IE8など)に適用するが、CSSのカスケードするしくみを完璧にカバーしているわけではなかった。ただ、@mediaを使った形式で記述しておけばオーバーライドに成功した。

/* 幅いっぱいにする設定(IE8対応用) */
@media (min-width: 768px) {
    width: auto;
  }
}
@media (min-width: 992px) {
  .container {
    width: auto;
  }
}
@media (min-width: 1200px) {
  .container {
    width: auto;
  }
}

以上