Tạo vị trí cố định cột trong bootstrap

Sử dụng Bootstrap, tôi có một cột lưới class = "col-lg-3" mà tôi muốn đặt nó ở vị trí: cố định trong khi .col-lg-9 khác là vị trí bình thường (có thể cuộn qua trang).

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

</div>

Cũng giống như cách cột bên trái trong LifeHacker.com Bạn sẽ thấy rằng phần bên trái được cố định tuy nhiên tôi cuộn qua trang.

Tôi sử dụng bootstrap v3.1.1

<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>

lặp lại câu trả lời của Ihab, chỉ sử dụng position:fixedvà khởi động col-offsetbạn không cần phải nói rõ về chiều rộng.

<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>

Làm theo giải pháp tại đây 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>

Tôi đã sửa đổi một số css để hoạt động hoàn hảo:

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

Cảm ơn @Lowkase đã chia sẻ giải pháp.

trong Bootstrap 3 class="affix"hoạt động, nhưng trong Bootstrap 4 thì không. Tôi đã giải quyết vấn đề này trong Bootstrap 4 với class="sticky-top" (sử dụng position: fixedtrong CSS có vấn đề riêng)

mã sẽ như thế này:

<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>

Đã cập nhật cho Bootstrap 4

Bootstrap 4 hiện bao gồm một position-fixedlớp cho mục đích này nên không cần thêm 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

Sử dụng cái này, phù hợp với tôi và giải quyết các vấn đề với màn hình nhỏ.

<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>

Với bootstrap 4 chỉ cần sử dụng 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>