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がそれを元に戻してしまう。
このあたり:
@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;
}
}
以上
Author And Source
この問題について(IE8+Bootstrap3で横幅いっぱいに広げる), 我々は、より多くの情報をここで見つけました https://qiita.com/oinariman/items/b386a2b8e0b5b47da755著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .