web-dev-qa-db-ja.com

bootstrapの列の位置を固定します

Bootstrapを使用して、position：fixedに配置したいグリッド列class = "col-lg-3"がありますが、他の.col-lg-9は通常の位置です（ページをスクロールできます）。

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

LifeHacker.com の左側の列と同じように、左側の部分が固定されていることがわかりますが、ページをスクロールします。

bootstrap v3.1.1を使用します

csscss3twitter-bootstraptwitter-bootstrap-3
66
user1556571

ここで解決策に従ってください http://jsfiddle.net/dRbe4/ 、

<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>

私は完璧に動作するようにいくつかのCSSを変更しました：

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

ソリューションを共有してくれた@Lowkaseに感謝します。

31
user1556571
<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>
73
Naga prasanna

ihabの答えを繰り返し、position:fixedとブートストラップcol-offsetを使用するだけで、幅を特定する必要はありません。

<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>
43
Pablo Fernandez

Bootstrap 3 class="affix"では機能しますが、Bootstrap 4では機能しません。 class="sticky-top"を使用してBootstrap 4でこの問題を解決しました（CSSでposition: fixedを使用すると問題が発生します）

コードは次のようになります。

<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>
9
Mohsen Sahrayi

これを使用して、私のために動作し、小さな画面で問題を解決します。

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>
4
Lucke

Bootstrap 4に更新

Bootstrap 4には、この目的のためにposition-fixedクラスが含まれるようになったため、追加のCSSは必要ありません...

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>

https://www.codeply.com/go/yOF9csaptw

4
Zim

bootstrap 4では、単に col-auto を使用します

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>
1
stefanitsky