jquery - Bootstrap 词缀不保持列布局

Question

当我在我的浏览器 (chrome) 中向下滚动时，右边的列一直被推到左边，我的侧边栏被推到背景，并且所有右侧的内容都在左侧边栏上。

只有当我将词缀属性应用到侧边栏 div 时才会发生这种情况。

如果您注意到，在正常情况下，页面呈现没有问题，如下所示:

但是，当我向下滚动时，它是这样的:

供您引用，这就是我实现词缀 div 的方式:

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

这里是 JS fiddle 的链接，这样您就可以实时看到问题的发生:

这是一个 JS fiddle 供您查看错误:

http://jsfiddle.net/fH46S/2/

我该如何解决这个问题？

Answer 1

这里有一些可以帮助您入门的东西:http://jsfiddle.net/panchroma/H2KU7/

它仍然需要改进，但重要的部分已经完成。关键是当你使用 affix 时，Bootstrap JS 将 .affix 的类应用到你在设置的滚动量后监视的 div。这个词缀类有css

position:fixed;

这就是阻止 div 滚动的原因。它还使 div 脱离正常流，这就是为什么会出现重叠。

我的解决方案是在左侧栏周围包裹一个新的 div，并将词缀行为应用于此。您的原始代码正在使用 <div class="col-lg-3">超出正常流量，这就是问题的根源。

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->    

编辑
要优化您的 css 以适应左侧栏的行为，请使用类似

的内容来定位左侧栏

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

希望这对您有所帮助!