0

Bootstrap Affix 機能の使用方法がわかりません。

http://jsfiddle.net/GUbgF/1/

Affix が .affix クラスをナビゲーション バーに追加するとすぐに、メイン コンテンツ ブロックが移動し、ナビゲーション バーがオーバーレイされます。

HTML

<class="row-fluid">
    <div class="span4 bs-docs-sidebar" id="side-bar" data-spy="affix" data-offset-top="100">
        <ul class="nav nav-list bs-docs-sidenav">
            <li><a href="#1"><i class="icon-chevron-right"></i>  1</a></li>
            <li><a href="#2"><i class="icon-chevron-right"></i>  2</a></li>
            <li><a href="#3"><i class="icon-chevron-right"></i>  3</a></li>
            <li><a href="#4"><i class="icon-chevron-right"></i>  4</a></li>
            <li><a href="#5"><i class="icon-chevron-right"></i>  5</a></li>
        </ul>
    </div>
   <div class="span8" id="main-bar>
    ...
   </div>
</div>

CSS

.affix {
position: fixed; 
top: 20px; 
left: 0px;

}

4

3 に答える 3

3

Bootstrap docs からの抜粋です。

注意喚起！固定された要素の位置とその直接の親の動作を管理する必要があります。位置は、affix、affix-top、および affix-bottom によって制御されます。ページの通常のフローからコンテンツを削除するため、接辞が適用されたときに折りたたまれている可能性のある親を確認することを忘れないでください。

したがって、あなたの場合、サイドバーを含む .affix が開始span4されると、DOM の通常のフローから削除されます。

これを修正する 1 つの方法は、`UL を接辞要素にすることです。

<ul class="nav nav-list"  data-spy="affix" data-offset-top="100">

http://jsfiddle.net/skelly/GUbgF/2/

ブラウザーの幅が縮小された場合に対処するために、@media クエリを使用する必要がある場合もあります。

于 2013-06-05T17:08:34.470 に答える
0

そのような古い投稿に貢献できれば。

私は最近、同様の問題に遭遇しました。メインのコピー領域を次のように分割しました。

col-sm-10 および col-sm-2

突然、コピーと画像を含む div が接辞 topnav の後ろにスクロールしますが、コピーと画像自体は接辞 navbar の上にスクロールします。

上記の修正を使用するとレイアウトが歪んでしまいましたが、さらに調査した結果、z-index を発見しました。

だから私がしたことは、接辞トップのナビゲーションバーの保持コンテナーにクラスを追加し、それに高い z-index を適用することだけでした。

.topNavContainer {
    z-index:99999;
}

z-index は、2 つ以上の div が互いに重なる場合に、どの div が前面に表示されるかを決定します。z-index が高いほど、別の div と重なるときの優先度が高くなります。

于 2016-02-22T23:21:36.320 に答える