twitter bootstrap 3 で横幅をめいっぱい広げたいとき

Tweet

Category css, html5 2014/01/05

問題

bootstrapって、Extra small devices Phones (<768px)、Small devices Tablets (≥768px)、Medium devices Desktops (≥992px)、Large devices Desktops (≥1200px) って、段階的に.containerの幅が変わるじゃないですか。 .containerの横幅をめいっぱいとりたいデザインのときって、どうするとよいですか？

答え

bootstrap 3.0.3 では、以下のように横幅の指定を自動にすればよい。

.container {width: auto;}

bootstrap 3.0.0 のときは、以下のように、メディアクエリで設定されているmax-widthの指定を外してやると.contanierが横幅いっぱいに広がってくれる。

@media (min-width: 768px) {
	.container {max-width: none;}
}
@media (min-width: 992px) {
	.container {max-width: none;}
}
@media (min-width: 1200px) {
	.container {max-width: none;}
}

bootstrap 3.0.1の時点から変わっているらしい（#10014, #10406）。