我正在使用 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>
那样渲染调整大小时。
最佳答案
Bootstrap 使用 extra CSS file for their docs覆盖某些元素的默认行为。
具体来说,在第 917 行,他们将附加侧边栏的位置
(作为 <767px 宽度的媒体查询的一部分)更改为静态
:
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
它们有几种附加的自定义样式应用于固定侧边栏;您可以使用 Chrome Web Inspector/Firebug 在手机大小的窗口上查看它们。
关于twitter-bootstrap - Twitter Bootstrap - 响应式词缀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13338897/