20

ブートストラップを使用して 2 列のレスポンシブ レイアウトを作成しようとしています。左の列にメニューを配置し、右の列に画像ギャラリーを配置します。右側の画像をスクロールしている間、メニューを固定したままにしたいと思います。

難しいのは、固定メニューをブートストラップ レイアウトで流動的にしたいということです。そのため、スクロールするときに上下に移動したくないのですが、画面のサイズを変更するときに自分自身を再配置したいのです。

このウェブサイトは私が言いたいことの一例です: http://www.galeriebertrand.com/artists

このサイトでどのように行われたかわかりません。左の列の位置が固定されているようには見えません。

4

2 に答える 2

17

position: fixed画面の幅が広い間、メディア クエリを使用してサイドバーを設定する必要があります。

例を次に示します: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS:

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

基本的に、この例では、列は幅 768px (またはブートストラップの「小さい」幅) で積み重ねられます。ブートストラップの「中」幅 (992px) のように別の幅で積み上げたい場合は、次のように変更しcol-sm-4, col-sm-8ます。col-md-4, col-md-8@media (min-width: 768px) to @media (min-width 992px)

于 2013-09-17T19:14:18.100 に答える
13

Bootstrap 2.x または 3 を使用していますか? あなたが探しているのは接辞クラスだと思います。以下のリンクを参照してください。

ブートストラップ 2.x: http://getbootstrap.com/2.3.2/javascript.html#afix

ブートストラップ 3: http://getbootstrap.com/javascript/#affix

于 2013-09-18T13:20:26.257 に答える