web-dev-qa-db-ja.com

bootstrap列内のdivを修正

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

難点は、固定メニューをbootstrap=レイアウトで流動的にすることです。したがって、スクロール時に上下に移動したくない場合は、サイズ変更時に自分自身の位置を変更する必要がありますスクリーン。

このウェブサイトは私が意味するものの例です： http://www.galeriebertrand.com/artists

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

htmlcsstwitter-bootstrapcss-positionmultiple-columns
20
fred

画面の幅が広いときに、メディアクエリを使用してサイドバーを_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)を変更します。

17
hajpoj

Bootstrap 2.xまたは3を使用していますか？探しているのはaffixクラスです。以下のリンクを参照してください。

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

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

13
guydog28