Twitter的Bootstrap – 响应词缀
我正在使用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>上正确应用了词缀效果，并且在向下滚动页面时，它始终保持不变。 但是，一旦我将页面大小调整为移动尺寸并且引导响应效果发生（导航栏折叠/对象之间的alignment很好），贴上的<div>现在位于页面的其他元素之上，并且变得混乱。 发生这种情况是因为.affix有position: fixed ，这很好解释。
现在我去了Bootstrap的网站，将页面大小调整为移动尺寸，粘贴的元素（ <ul>在他们的情况下）开始与页面很好地stream动，取而代之的是其自然的位置。 我也注意到，一旦发生这种情况，class级就从affix变成affix-top 。
我不知道这是他们的定制，还是它是框架的一部分，因为框架显然不是相同的方式。 任何人都可以详细说明这一点？ 我需要在我的<div>处具有相同的行为，如果页面被调整为移动尺寸，则被粘贴的元素将占据其自然位置。
编辑：我的观察有点有缺陷。 我注意到，他们的页面上的元素最初有affix-top ，一旦我滚动下面的data-top-offset它改变affix 。 它仍然不能解释为什么我的<div>不会像resize时的<ul>一样渲染。
Bootstrap使用一个额外的CSS文件来覆盖某些元素的默认行为。
具体来说，在第917行，他们将添加的边栏的position （作为<767px宽度的媒体查询的一部分）更改为static ：
.bs-docs-sidenav.affix { position: static; width: auto; top: 0; }
他们有几个额外的自定义样式适用于贴边栏; 您可以在电话大小的窗口上使用Chrome Web Inspector / Firebug查看它们。
HTML不要粘贴span3（或span4等）的DIV，但它的孩子; 在我的情况下，我贴了#sidebar。 另外，您不必将.affix类或data-offset-top =“XXX”添加到此div。 下面的JavaScript将做的伎俩。
<aside class="span3"> <div id="sidebar"> <p>some content</p> </div> </aside>
CSS （下面的代码在bootstrap.css中不存在，我从http://twitter.github.io/bootstrap/assets/css/docs.css复制它）;
.affix-bottom { position: absolute; top: auto; bottom: 400px; }
Javacript下面的js会根据滚动的页面数量将#sidebar类从.affix更改为.affix-bottom
$('#sidebar').affix({ offset: { bottom: 450 } });
事实上，小分辨率的#sidebar会重叠其他元素。 要解决这个问题，请使用bootstrap的媒体查询http://twitter.github.io/bootstrap/scaffolding.html#responsive
正如萨拉先前指出的那样，你可以使用像..
@media(max-width:767px){ .affix { position: static; width: auto; top: 0; } }
所以你让#sidebar行为。
希望这有助于某人！
我有同样的问题，我的解决scheme是删除小屏幕尺寸的词缀行为。 例如，要删除1199像素以下的尺寸，请执行以下操作：
#map { @media (min-width: 1199px) { &.affix-top { } &.affix { position: fixed; top: 20px; bottom: 100px; } &.affix-bottom { } } }
