Twitter Bootstrap - 响应式词缀答案

【问题标题】：Twitter Bootstrap - Responsive affixTwitter Bootstrap - 响应式词缀
【发布时间】：2012-11-12 05:41:57
【问题描述】：

我正在使用 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> 那样呈现。

【问题讨论】：

有趣的问题，我自己也有类似的问题。就我而言，附加的侧边栏变得更宽并与内容重叠。我认为通常缺乏有关此新功能的文档。
@markus-tharkun 我想我的回答也可以解决您的问题 (width: auto;)。

标签： twitter-bootstrap

【解决方案1】：

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

具体来说，在第 917 行，他们将附加侧边栏的 position（作为 static：

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

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

【讨论】：

我想知道为什么引导程序不应用必要的更改，如果词缀只适用于它们。也许他们太依赖上下文了。
我同意，它可能过于依赖上下文。我在他们的issue tracker 上找不到关于这个主题的任何讨论。
@Sara 您不应该签入问题跟踪器，因为它不是问题。这是预期的和记录在案的行为。 “词缀插件在三个类之间切换，每个类代表一个特定状态：.affix、.affix-top 和 .affix-bottom。您必须自己提供这些类的样式（独立于此插件）以处理实际位置。 " getbootstrap.com/javascript/#affix-usage（不过这篇文章是 2012 年发布的，所以文档可能已经更新）

【解决方案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的class从.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 正常运行。

希望这对某人有所帮助！

【讨论】：

【解决方案3】：

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

#map {

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

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

    &.affix-bottom {
    }
  }
}

【讨论】：