2

開発の初期段階にあるブートストラップをテーマにした Web サイトを持っていますが、粘着性のあるナビゲーション バーから奇妙な動作が発生しています。Chrome で途中まで下にスクロールした後 (および Firefox で最初にスクロールするとき)、ナビゲーション バーが幅の半分に縮小します。誰かがこれの原因を考えることができますか?

この動作のデモは、http://studiomimo.comで見ることができます。

ありがとう!

4

2 に答える 2

1

affix と scrollspy の両方を使用しているようです。両方を一緒に使用する必要はないと思います。おそらくそれが問題の原因です。scrollspy だけを使用する方がよいでしょう。

これを行うには、body タグを次のように変更します。

<body data-spy="scroll" data-target=".navbar" data-offset-top="50">

次に、navbar div を次のように変更します。

<div class="navbar navbar-inverse navbar-fixed-top">

これにより、scrollspy を機能させながら、サイズ変更の問題が停止します。ただし、ナビゲーション バーを全幅より小さくしたい場合は、使用せずnavbar-fixed-top、代わりにナビゲーション バーを自分で上部に固定して、次のようにすることをお勧めします。

@media (min-width: 481px) {
  .navbar {
    position: fixed;
    z-index: 1030;
    width: 80%;
    margin: 20px auto;
  }

}  
于 2013-04-24T21:05:53.023 に答える
0

ベースのCSSでnav-wrapper IDでこれを試してください

html

<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">

CSS

#nav-wrapper.affix {
top: 0 !important;
width: 100% !important;
}

サイズ変更の問題が解決するはずです。

于 2014-02-09T10:03:13.690 に答える