固定列布局引导程序3

Question

我很好奇，到处都是。 我正在尝试创建一个三列布局，其中左列和右列均为粘性，而中间列为非粘性。 我尝试将data-spy =“ affix”添加到我的代码中，甚至设置偏移量，我都可以使左列变粘，但是添加dataspy时，右列嵌套在左列中。

下面的代码：

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

此外，如果您想知道为什么它看起来很有趣，则内联PHP代码稍后将包含一些php脚本。

编辑

CSS代码

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

HTML代码

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

看起来“中心柱”位于“中心柱”下方。 偏移时，它看起来很靠右。

代替

Answer 1

我找到了答案

http://bootply.com/101100

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

代替：

<div class="well span2">

每个侧边栏。

Answer 2

您可能会在这里找到答案。

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