SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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

答え

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)

関連するメモ

コメント