web-dev-qa-db-ja.com

Bootstrap 3：ロゴがNavbarの高さを増やすとナビゲーションリンクが垂直方向に中央に配置される

bootstrapフレームワークは初めてです。

ロゴのNavBarの高さの増加：

ナビゲーションバーに、高さが50ピクセルのロゴを挿入しました。これにより、明らかにnavbarが高くなります。私はこれのためにCSSを調整していません。高さを強制しているのは単にロゴです。

問題：

ナビゲーションバーのリンクは、現在の背の高いナビゲーションバーの上部に揃えられています。

目標：

リンクがずっと良く見えるように、リンクがnavbarの垂直方向の中央に配置されるようにします。

私の想定は、行の高さの値またはパディングで遊ぶことでした。ただし、モバイルブラウザで（トグルメニューに切り替えたとき）有効のままであるという問題が発生したため、拡張されたメニューが高すぎて見た目が悪くなりました。

洞察は大歓迎です？

私のCSSは、最新バージョン3.0.2でダウンロードされたデフォルトのbootstrap CSSです。

これが私のHTMLです。

<!-- Begin NavBar -->
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".menu2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand" href="#"><img src="img/logo.png" width="210" height="50" alt="My Logo"></span>
    </div>


    <div class="navbar-collapse collapse menu2">

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>

「リンク1」、「リンク2」、「リンク3」、「リンク4」のリンクが上部に揃えられているのは、本当に中央に垂直に並べたい場合です。

csstwitter-bootstraptwitter-bootstrap-3
52
Robert Scott

これをスタイルシートに追加します。行の高さはロゴの高さと一致する必要があります

.navbar-nav li a {
 line-height: 50px;
}

次のフィドルをご覧ください。 http://jsfiddle.net/nD4tW/

95
Matt Lambert

マットの答えは問題ありませんが、これを回避してnavbar内の他の要素に伝播する（ドロップダウンがある場合など）には、

.navbar-nav > li > a {
   line-height: 50px;
}
9
Gabriel Udrea

Bootstrap Customizer を使用して、より高いnavbarを持つBootstrapのバージョンを生成します。変更する値は、 Navbarセクション の@navbar-heightです。

現在の実装を調べて、50ピクセルのブランドイメージでnavbarの高さを確認し、その計算された高さをカスタマイザーで使用します。

3
Ross Allen

ブートストラップはnavbarの高さを自動的に50pxに設定します。リンクの上下のパディングは15pxに設定されています。 bootstrapがロゴにパディングを追加していると思います。

ロゴの上下のパディングの一部を削除するか、リンクの上下にパディングを追加できます。

パディングを追加すると、次のようになります。

nav.navbar-inverse>li>a {
 padding-top: 25px;
 padding-bottom: 25px;
}
2
spasticninja

必ずしもテキストを垂直方向の中央に配置する必要はなく、行の下部近くでも見栄えがよく、上部（または中心より上）にある場合にのみ間違って表示されます。だから私はこれで行の一番下にリンクをプッシュしました：

.navbar-brand {
    min-height: 80px;
}

@media (min-width: 768px) {
    #navbar-collapse {
        position: absolute;
        bottom: 0px;
        left: 250px;
    }
}

私のブランドイメージはSVGであり、height: 50px; width: autoを使用して、幅を約216pxにしました。コンテナから垂直方向にこぼれたので、min-height: 80px;を追加して、それにスペースとブートストラップの15pxマージンを追加しました。それから、navbar-collapseのleft設定を正しく見えるまで調整しました。

0
realh

実際、ナビゲーションバーの崩壊を許容するために、このようなものになりました。

@media (min-width: 768px) { //set this to wherever the navbar collapse executes
  .navbar-nav > li > a{
    line-height: 7em; //set this height to the height of the logo.
  }
}
0
Eric