Bootstrapのナビゲーションバー(Navbar)

ページ上部のメニューを構築するNavbarについて。

情報元：http://getbootstrap.com/components/#navbar
日本語訳：<a href="http://www.wivern.com/bootstrap/components.html#navbar">コンポーネント · Bootstrap</a>www.wivern.com

モバイル用の垂直折りたたみをキャンセルする

初期設定では、ビューポートの幅が768pxを下回ると、ナビバーが垂直配置になる。これを避けるためには、@grid-float-breakpoint の値を変更するか、nav nav-pillsを利用する。

nav-pillsをnavbar内で利用すると、上に配置される場合がある。上下中央に配置するためには、上のマージンを設定するなどする(正解かはわからないが、ひとまず動いている)

React-Gulp-Browserifyでの変更方法

プロジェクトフォルダー/app/styles/main.scssを開く
最後に、以下を追加する

/* nav-pills style*/
$nav-link-padding-height:  10px;
$nav-pills-margin-top:  floor(($navbar-height - $line-height-computed - ($nav-link-padding-height * 2)) / 2) !default;

.tmnt-nav-pills-top {
  > li {
    > a {
        margin-top: $nav-pills-margin-top;
    }
  }
}