twitter-bootstrap - 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>当我向下滚动页面时它保持静止。但是，一旦我将页面大小调整为移动尺寸并发生 Bootstrap 响应效果(导航栏折叠/对象在彼此下方很好地对齐)，则附加 <div>现在位于页面其他元素之上，并且变得困惑。发生这种情况是因为 .affix有position: fixed这很好地解释了这一点。

现在我去了Bootstrap的网站并将页面大小调整为移动尺寸后，附加元素(在本例中为 <ul>)开始与页面很好地流动，占据其自然位置，而不会超出其他元素。我还注意到，一旦发生这种情况，类(class)就会从 affix 更改为至affix-top .

我不确定这是他们的定制还是框架的一部分，因为框架的行为方式显然不同。谁能详细说明一下吗？我需要在我的 <div> 上有相同的行为如果页面大小调整为移动尺寸，则附加元素将占据其自然位置。

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

Answer 1

Bootstrap 使用 extra CSS file for their docs覆盖某些元素的默认行为。

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

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

它们有几种附加的自定义样式应用于固定侧边栏；您可以使用 Chrome Web Inspector/Firebug 在手机大小的窗口上查看它们。