固定列布局引导程序3

Question

I am curious, and I have been looking everywhere. I am trying to create a three column layout where the left, and right columns are sticky, and the center column is not sticky. I have tried adding the data-spy="affix" to my code, and even set an offset, I can get the left column to become sticky, but the right column when adding the dataspy appears nested within the left column.

Code Below:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="well span2"><?="Left Column";?></div>
        <div class="well span8"><?="Center Column";?></div>
        <div class="well span2"><?="Right Column";?></div>
    </div>
</div>

Also, inline PHP code will contain some php scripts later on if you are wondering why it looks funny...

Edit

Css Code

.stick_r {
    position:fixed;
    right:10px;
}
.stick_l {
    position:fixed;
    left:10px;
}

HTML Code

<div class="container-fluid">
    <div class="row-fluid">
        <div class="well span2 stick_l">Left Column</div>
        <div class="well span8">Center Column</div>
        <div class="well span2 stick_r">Right Column</div>
    </div>
</div>

Looks like Center Column is underneath the Center Column. When offsetting it appears way to far to the right.

Instead of

Answer 1

you answer might be found here.

http://www.pixelbind.com/make-a-div-stick-when-you-scroll/

Answer 2

I found the answer at

http://bootply.com/101100

<div class="sidebar-nav-fixed pull-right affix">

Instead of:

<div class="well span2">

for each sidebar.