Bootstrap 3 : navbarと .containerの関係
.container
は中のものを中央に配置する。.container
の位置に注意
デフォルト
- デフォルト(全体が中央,角丸)
<div class="container"> <nav class="navbar navbar-default" role="navigation"> ... </nav> </div>
- デフォルト・最大幅
<nav class="navbar navbar-default" role="navigation"> ... </nav>
スタティック
- スタティックトップ・要素は中央
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> ... </div> </nav>
- スタティックトップ・要素も最大幅
<nav class="navbar navbar-default navbar-static-top" role="navigation"> ... </nav>
- スタティックトップ・navbar全体を中央寄せ
- デフォルトと異なる点は、角丸じゃない。
<div class="container"> <nav class="navbar navbar-default navbar-static-top" role="navigation"> ... </nav> </div>
固定
.container
をどこに指定しようが、navbarそのものは最大幅で上に固定。
- トップに固定(Fixed top)要素は中央
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> ... </div> </nav>
- トップに固定(Fixed top)要素は最大幅
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> ... </nav>
おまけ
- navbar-defaultをはずすと、バーの色が消える。