52

我正在使用 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>。

4

3 回答 3

63

Bootstrap为其文档使用了一个额外的 CSS 文件，该文件覆盖了某些元素的默认行为。

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

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

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

于 2012-11-12T21:29:36.447 回答
28

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 会与其他元素重叠。要解决这个问题，请使用引导程序的媒体查询http://twitter.github.io/bootstrap/scaffolding.html#responsive

正如Sara之前指出的那样，您可以使用类似..

@media(max-width:767px){
   .affix {
     position: static;
     width: auto;
     top: 0;
    }
}

..这样您就可以使#sidebar 正常运行。

希望这对某人有帮助！

于 2013-04-06T01:32:18.817 回答
1

我遇到了同样的问题，我的解决方案是删除较小屏幕尺寸的词缀行为。例如，要删除小于 1199 像素的尺寸：

#map {

  @media (min-width: 1199px) {
    &.affix-top {
    }

    &.affix {
      position: fixed;
      top: 20px;
      bottom: 100px;
    }

    &.affix-bottom {
    }
  }
}
于 2014-01-27T23:05:48.437 回答