Twitter Bootstrap - 响应词缀

Question

我正在使用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>位置具有相同的行为如果页面被调整为移动尺寸,则附加元素占据其自然位置.

编辑:我的观察有点缺陷.我注意到他们页面上的元素最初有affix-top,一旦我在data-top-offset它下面滚动它就会改变affix.它仍然无法解释为什么我<div>不会像<ul>调整大小时那样渲染.

Answer 1

Bootstrap 为其文档使用额外的CSS文件,以覆盖某些元素的默认行为.

具体来说,在第917行,他们position将附加的侧边栏(作为<767px宽度的媒体查询的一部分)更改为static:

.bs-docs-sidenav.affix {
  position: static;
  width: auto;
  top: 0;
}

他们有几个额外的自定义样式应用于附加的侧边栏; 您可以在手机大小的窗口上使用Chrome Web Inspector/Firebug查看它们.

Answer 2

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底

   $('#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表现得很好.

希望这有助于某人!