在引导程序中使列固定位置

Following the solution here 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>

I modified some css to work just perfect:

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

Thanks @Lowkase for sharing the solution.

iterating over Ihab's answer, just using position:fixed and bootstraps col-offset you don't need to be specific on the width.

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

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

Use this, works for me and solve problems with small screen.

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

in Bootstrap 3 class="affix" works, but in Bootstrap 4 it does not. I solved this problem in Bootstrap 4 with class="sticky-top" (using position: fixed in CSS has its own problems)

code will be something like this:

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

Updated for Bootstrap 4

Bootstrap 4 now includes a position-fixed class for this purpose so there is no need for additional 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

With bootstrap 4 just use 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>

Use .col instead of col-lg-3 :

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

If you really want to do it that way, you can't do it in "col- *", because it's going to overlap each other, you should do it in the parent class "row", but depending on what you're doing, you might have a problem with the browser scroll that will be "cut" from the screen, however, is simple to solve, just control the column width and everything will be fine.

<div class="row fixed-top h-100">
<div class="col-lg-3">
Fixed content
</div>
<div class="col-lg-9 overflow-auto h-100">
Normal scrollable content
</div>


</div>

Bootstrap 5

The solution is very similar to v4, but you can use responsive variations with .sticky-*-top classes.

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

Docs: https://getbootstrap.com/docs/5.0/helpers/position/#responsive-sticky-top