tkymtk's blog

Ruby on Rails及びその周辺について調べたこと。Do whatever you want to do at your own pace.

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をはずすと、バーの色が消える。
間違いがあれば、ご指摘下さると幸いです。