2

http://www.initializr.com/からブートストラップ テンプレートをダウンロードしました 。ウェブ ページのフッターまでスクロールするたびに、ナビゲーション バーを画面上部に固定するにはどうすればよいですか? 私が達成しようとしていることをよりよく理解するために、スクリーンショットを作成しました。

例 :モバイル デバイスの視点では、NAVBAR は固定されています

ナビゲーションバーは画面の上に固定されています

例 :ページのフッターまで下にスクロールすると、NAVBAR が画面の上に固定されたままになります。ご覧のとおり、NAVBAR は画面上部に固定できません。

ここに画像の説明を入力

コード：

<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
                    <a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li>
                                <a href="#product">Product and Services</a>
                            </li>
                            <li>
                                <a href="#investor">Investor Relations</a>
                            </li>
                            <li>
                                <a href="#support">Get Support</a>
                            </li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Search">
                            <button type="submit" class="btn btn-default">
                                <i class="icon-search icon-black"></i>Go
                            </button>
                        </form>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

どうすればこれを達成できますか?

4

1 に答える 1

11

ナビゲーション バーを div 内にラップし、これらの css クラスを追加して、次のようにスタイルします。class="navbar navbar-fixed-top"

例: http://jsfiddle.net/codovations/Uy5tt/show/

PS: HTML を表示するには、URL の末尾から show を削除します。

更新: 基本的に、これは div に適用され、上部に固定されます。

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
}
于 2012-10-26T08:10:56.527 に答える