8

Bootstrap3の固定ナビゲーションバーの高さを下げようとしています。@navbar-height変数で変数を見つけました。少なく、変更しましたが、何も変わっていないようです。これらの解決策も試します：「ナビゲーションバーの高さを変更する」、「ナビゲーションバーの高さを変更する」。検索結果はありません。

何か案が？

ありがとう

4

2 に答える 2

21

アップデート

https://github.com/twbs/bootstrap/issues/11443の応答によると、 @mdo は次のように書いています。

and を変更する@navbar-heightと@navbar-padding-vertical、それが得られるはずです。

例、設定@navbar-height: 20px;、@navbar-padding-vertical: 0;参照: http://bootply.com/100604

.navbar-formこれは要素の高さを設定しないことに注意してください

更新を終了する

navbar 自体には定義された幅はありません。原因 Bootstrap はボーダー ボックスモデルを使用します。高さはその中の最も高い要素によって設定されます。

navbar には min-height があることに注意してください (navbar のデフォルトの高さである 50px に設定されています)。navbar.less の @navbar-height は、この最小高さを設定します。

コメントも読んでください：

// ナビゲーション バーが常に表示されるようにします (たとえば、折りたたみモードで .navbar-brand なし)

高さを変更するには、内側の要素の高さを変更する必要があります。

.navbar-ブランド

.navbar-brand クラスの高さは 50px です。15px のパディング + 20px の行の高さによって定義されます。(2 x 15 + 20 = 50)。

ラインの高さは @line-height-computed によって navbar.less でも設定されます。variables.less で定義された @line-height-computed を次のように使用します。 floor(@font-size-base * @line-height-base); // ~20px

@line-height-computed はフォームやナビゲーションなどでも使用されるため、変更して Bootstrap を再コンパイルすると、navbar に影響するだけではありません。

上記により、ナビゲーションバーの高さを Less で設定することができなくなります。

パディングはによって定義されますnavbar-padding-verticalが、この変数は navbar リンクのパディングの設定には使用されません (.navbar-nav > li > a)

css を使用して .navbar-brand の行の高さ (つまりフォント サイズ) とパディングを操作して、その高さを変更し、navbar の高さを変更します。

.navbar-nav > li > a

.navbar-nav > li > a クラスでは、navbar のリンクも 50px の高さ (15 の下部/上部のパディング) と 20x の行の高さを定義します。パディングは最初に navbar.less で 10 ピクセルのハード コードに設定され、((@navbar-height - @line-height-computed) / 2)(優先度が高い) によって上書きされることに注意してください。@media (min-width: @grid-float-breakpoint)

また、この場合、リンクの行の高さは @line-height-computed によって設定されます。

その他の要素

また、フォームのような要素、ドロップダウンには計算された高さが含まれます。

全体として、固定ナビゲーションバーのさまざまな要素に css を使用して高さを設定する必要があるようです。

参照: https://github.com/twbs/bootstrap/issues/11443およびhttps://github.com/twbs/bootstrap/issues/11444

于 2013-11-10T21:38:13.753 に答える
1 
.navbar {
    padding: 0;
    transition: background 0.5s ease-in-out 0s, padding 0.5s ease-in-out 0s;
}
.navbar-brand {
    float: left;
    font-size: 18px;
    height: 10px;
    line-height: 2px;
    padding: 2px;
}

scrolling-nav.css をオーバーライドする必要があります

于 2015-07-30T07:52:52.193 に答える