0

この Web ページを下にスクロールし始めると、Bootstrap 接辞プラグインが切り込みを入れます<header class="jumbotron subhead">- この画像はこの症状を示しています:

ここに画像の説明を入力

スクロールを開始したときに > に<header class="jumbotron subhead">切り込まれない Bootstrap の公式ドキュメントに表示されるように、接辞ナビゲーションが切り込まないようにして動作させたいと思います。<header class="jumbotron subhead"追加の CSS ルールを使用してこの問題を解決する方法はありますか? 現在、Affix コンポーネントに適用される私の CSS ルールは、Bootstrap のドキュメントに掲載されている Affix コンポーネントとまったく同じです。両方の Web サイトで貼り付けられたナビゲーションを調べると、正しく表示されない理由がわかりません。

CSS ルール:

.bs-docs-sidenav.affix {
    top: 40px;
}
.bs-docs-sidenav {
    width: 258px;
}
.bs-docs-sidenav {
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    margin: 30px 0 0;
    padding: 0;
    width: 228px;
}
.affix {
    position: fixed;
}
.nav-list {
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.nav {
    list-style: none outside none;
    margin-bottom: 20px;
    margin-left: 0;
}
ul, ol {
    margin: 0 0 10px 25px;
    padding: 0;
}

私が取り組んでいるウェブサイト（壊れた接辞）：

http://www.bestcastleintown.co.uk/boot/test2.html#slides

Bootstrap Web サイト (作業接辞):

http://twitter.github.com/bootstrap/javascript.html

4

1 に答える 1

3

ここで行う必要があるのは、貼り付けた後、ナビゲーション バーを配置する場所を定義することだけです。stylesheet.css の変更で

.bs-docs-sidenav.affix {
top: 40px;
}

のようなものに 

.bs-docs-sidenav.affix {
top: 230px;
}

お役に立てれば！

于 2013-02-20T16:57:40.547 に答える