読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

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

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

情報元:http://getbootstrap.com/components/#navbar
日本語訳: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;
    }
  }
}
  • ulタグに、nav nav-pillsに加えて、tmnt-nav-pills-topをクラスに加えておくと、その中のli>aの要素に上マージンが設定される