我使用Twitter Bootstrap，我有以下：
<div class="row">
<div class="span3">
<div data-spy="affix">
<form>
<!-- inputs and stuff -->
</form>
</div>
</div>
<!-- span9 and its contents -->
</div>
Bootstrap正在将正确的词缀效果应用于< div>并且当我向下滚动页面时它保持静止。但是，一旦我将页面调整为移动尺寸，并且引导响应效果发生(导航栏折叠/对象在对方之下对齐很好)，则附加的< div>现在在页面的其他元素的顶部，它变得凌乱。这是因为.affix有position：fixed，这很好地解释了。
现在我去了Bootstrap的网站，并将页面调整到移动尺寸，固定的元素(< ul>在他们的情况下)开始流畅地与页面，自然的地方，而不会在其他元素的顶部。我也注意到，一旦发生，类从affix到affix-top。
我不知道这是否是他们的定制或者如果它是框架的一部分，因为框架显然不是以相同的方式行为。任何人都可以解释一下吗？我需要在我的< div>上有相同的行为如果页面调整为移动尺寸，则附加的元素将占据其自然的位置。
编辑：我的观察是有点有缺陷。我注意到，他们的页面上的元素最初有固定顶部，一旦我滚动下面的data-top-offset它改变为affix。它仍然不解释为什么我的< div>将不会像他们的< ul>当调整大小。
解决方法
Bootstrap使用
extra CSS file for their docs覆盖一些元素的默认行为。
具体来说，在第917行，他们将附加侧边栏的位置(作为< 767px宽度的媒体查询的一部分)改变为静态：
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
他们有几个额外的自定义样式应用到固定的侧边栏;您可以在手机大小的窗口上使用Chrome Web Inspector / Firebug查看它们。