固定列布局引导程序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/