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使用extra CSS file for their docs来覆盖某些元素的默认行为。

具体来说，在第917行，他们将附加边栏的position（作为＆lt; 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-bottom

   $('#sidebar').affix({
      offset: {
        bottom: 450
      }
   });

确实在小分辨率上#sidebar会与其他元素重叠。要解决此问题，请使用bootstrap的媒体查询http://twitter.github.io/bootstrap/scaffolding.html#responsive

正如Sara之前所指出的那样，你可以使用像..

这样的东西

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

..这样你就可以使#sidebar表现出来了。

希望这有助于某人！

Answer 3

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

#map {

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

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

    &.affix-bottom {
    }
  }
}

Twitter Bootstrap - 响应词缀

3 个答案: