twitter-bootstrap – Twitter Bootstrap – 响应式

发布时间：2020-12-17 23:52:36 所属栏目：安全来源：网络整理

导读：我使用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并且当我向下滚动页面时它保持静

我使用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>上有相同的行为如果页面调整为移动尺寸，则附加的元素将占据其自然的位置。

编辑：我的观察是有点有缺陷。我注意到，他们的页面上的元素最初有固定顶部，一旦我滚动下面的data-top-offset它改变为affix。它仍然不解释为什么我的< div>将不会像他们的< ul>当调整大小。

解决方法

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!