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>现在位于页面的其他元素之上,并且变得混乱。 发生这种情况是因为.affixposition: 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 { } } }