2

Bootstrap 3.0 を使用して右側の列をウィンドウの上部 (スクロール時) に固定し、貼り付けたいと考えています。

これは要素の html です。

<div class="col-lg-4 right-hand-bar" data-spy="affix" data-offset-top="477">

これはcssです：

.right-hand-bar.affix {
    width: 390px;
    position: fixed;
    top: 0px;
    right: 0px;
    margin-top: 110px;
}

この例では、いくつかの奇妙なことが起こっていることがわかります。

  • 固定された .right-hand-bar (人気のあるブログ投稿など) が画面の右側にジャンプします (位置固定が適用されているため)。サイトはレスポンシブなので、正しいポジショニングを台無しにしたくありません。
  • 固定バーがメインコンテナの外に飛び出します。
  • 固定要素に幅を追加する必要がありましたが、これは望ましくありません (レスポンシブであるため)。
  • また、固定要素の下部がフッターの上部 (またはフッターからのオフセット値) に達したときに、ページのスクロールを停止したいと思います。

誰もがこれらのいずれかを助けることができます.

前もって感謝します！

4

1 に答える 1

2

スタイルのメディア クエリをラップし.right-hand-bar.affixて、デスクトップ バージョンにのみ適用されるようにします。とにかく、小さな画面で修正したくありません。

position: relative;次に、 のスタイルに追加する.rowと、.right-hand-barページ全体ではなく、そのコンテナに相対的に が固定されます。

于 2013-10-02T20:06:13.487 に答える