2

この質問の回答を使用して sidenav を配置しようとしています。現在、次の方法でメニューの位置をページに固定できます。

<div style="position: fixed" ..>
  ..
</div>

または、これを対応する CSS ルールに追加します。正常に動作しますが、位置はジャンボトロンのサブヘッドの直後から始まり、スクロールしてもそこにとどまります。ページの上部にあるジャンボトロンをオーバーライドして、下にスクロールしたときにページの上部の固定位置に移動しないようにしたい (アクティブなハイライトを気にしないことを除いて、ドキュメント ページのように)

ドキュメントのソースをコピーdocs.cssしてページにファイルを追加しようとしましたが、何らかの理由で機能しません。これどうやってするの？

編集

ここにそれを明確にするための図があります

ここに画像の説明を入力

4

1 に答える 1

2

ここから始めましょう: http://jsfiddle.net/panchroma/s9XpJ/

私は非常に興味深く、多くのオプションを提供する 接辞動作を使用しました。

私の例で重要なことは、スパイしたい div を指定した HTML にあります。 

<div "span3" id="side-nav" data-spy="affix" data-offset-top="200">
 <!-- nav here -->
</div>

divが固定される前にスクロールする必要がある距離であるdata-offset-topを指定しました。

クラスの接辞は、それが貼られたときに div に追加されるので、CSS で何が起こるかを指定しました。 

#side-nav.affix{
top:10px;
}

デフォルトでは、ブートストラップはその位置を固定として定義し、通常の流れから外すため、通常、ページ上の固定された div の位置を変更する必要があります。

また、メディア リクエストを使用していくつかの CSS を追加し、ビュー ポイントが狭くなったときに何が起こるかを微調整しました。Bootstrap サイトの例では、最も狭い画面のサイド ナビゲーションの固定動作を削除しています。ここで繰り返しました。

幸運を！

于 2013-01-29T18:41:56.407 に答える