5

[ほぼ]すべてが に基づいてremsいるため、ナビゲーションバーにはいくつかのファンキーな高さのプロパティがあるようです. 1 つには、ナビゲーションバーの高さは可変ですが、パディングは上下で静的な 8 ピクセルです。

navbar の疑似動的性質の結果として、body の padding-top を 50px に設定するだけでは機能しなくなりました。ユーザーがフォント サイズを変更すると、バーの高さは 50px ではなくなります。

ページの上部までスクロールしたときに、ボディをナビゲーションバーの正確に下に保つために、ボディに適切な量のパディングを与える方法を考え出した人はいますか?

これを達成するためにjQueryを使用しなければならない場合、回帰のように思えますが、おそらくそれが唯一の方法です。

コード例:

body {
  padding-top: 54px;
  background-color: blue;
}

div.container-fluid {
  background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="navbar" class="navbar navbar-fixed-top navbar-dark bg-inverse container">
  <a href="www.google.com" class="navbar-brand">google.com</a>
</nav>

<div class="container-fluid">
  <p>I am content that is getting overlapped by the navbar!</p>
</div>

一部のフォント サイズではバーが重なっており、他のサイズではギャップがあることに注意してください。Mac OS X では、コマンド + マイナスおよびコマンド + プラスでフォント サイズを変更できます。

編集: ブートストラップ 4 github ページで問題を提起しました。バグは確認されていますが、通常はズーム効果をサポートしていないため、範囲外になる可能性があります。

4

1 に答える 1

0

クロムの問題を確認できます。ズームすると、ナビゲーションバーの計算された高さが変わります。上記の結果、125% と 175% のズーム レベルのギャップが生じます。以下を参照してください。 ここに画像の説明を入力

125% の場合、navbar の計算された高さ = 54 ではなく 53.6 (37.6 + 8*2)です。関連する可能性のあるもの: Chrome の丸めメディア クエリの em 単位は間違っていますか?

于 2015-12-08T23:55:02.373 に答える