twitter-bootstrap Twitter Bootstrap - 响应式词缀
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13338897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - Responsive affix
提问by Aziz Alfoudari
I'm using Twitter Bootstrap and I have the following:
我正在使用 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 is correctly applying the affix effect on <div>and it stays still when I scroll down the page. However, once I resize the page to mobile dimensions and bootstrap responsive effects take place (navbar collapsing/objects aligning nicely under each other), the affixed <div>is now on top of other elements of the page and it gets messy. This is happening because .affixhas position: fixedwhich explains it pretty well.
Bootstrap 正确地应用了词缀效果，<div>当我向下滚动页面时它保持静止。但是，一旦我将页面大小调整为移动尺寸并发生引导响应效果（导航栏折叠/对象在彼此下方很好地对齐），附加<div>内容现在位于页面其他元素的顶部并且变得凌乱。发生这种情况是因为.affixhasposition: fixed很好地解释了它。
Now I went to Bootstrap's website and resized the page to mobile dimensions, the affixed element (<ul>in their case) starts flowing nicely with the page, taking its natural place without going on top of other elements. I have also noticed that once that happens, the class is changed from affixto affix-top.
现在我去了Bootstrap的网站并将页面调整为移动尺寸，附加元素（<ul>在他们的情况下）开始与页面很好地流动，在没有其他元素的情况下占据自然位置。我还注意到，一旦发生这种情况，类就会从 更改affix为affix-top。
I'm not sure if this is their customization or if it's part of the framework, because the framework is apparently not behaving the same way. Can anyone elaborate on this? I need to have the same behavior on my <div>where if the page gets resized to mobile dimensions the affixed element takes its natural place.
我不确定这是他们的自定义还是框架的一部分，因为该框架的行为显然不同。任何人都可以详细说明这一点吗？<div>如果页面被调整为移动尺寸，我需要在我的位置上有相同的行为，附加元素会占据它的自然位置。
Edit:My observation is a bit flawed. I noticed that the element on their page initially has affix-topand once I scroll below data-top-offsetit changes to affix. It still doesn't explain why my <div>won't render like their <ul>when resized.
编辑：我的观察有点缺陷。我注意到他们页面上的元素最初有affix-top，一旦我向下滚动data-top-offset它就会变为affix. 它仍然没有解释为什么我在调整大小时<div>不会像他们一样呈现<ul>。
回答by Sara
Bootstrap uses an extra CSS file for their docsthat overrides the default behavior of some elements.
Bootstrap为其文档使用了一个额外的 CSS 文件，该文件覆盖了某些元素的默认行为。
Specifically, on line 917, they change the positionof the affixed sidebar (as part of a media query for <767px width) to static:
具体来说，在第 917 行，他们position将附加的侧边栏（作为 <767px 宽度的媒体查询的一部分）更改为static：
.bs-docs-sidenav.affix {
position: static;
width: auto;
top: 0;
}
They have several additional custom styles applied to the affixed sidebar; you can view them by using Chrome Web Inspector/Firebug on a phone-sized window.
他们有几个附加的自定义样式应用于附加的侧边栏；您可以在手机大小的窗口上使用 Chrome Web Inspector/Firebug 查看它们。
回答by filtermusic
HTMLDon't affix the span3 (or span4 etc) DIV but a child of it; in my case I affixed #sidebar. Also you don't have to add .affix class or data-offset-top="XXX" to this div. The following Javascript will do the trick.
HTML不要附加 span3（或 span4 等）DIV，而是它的子项；就我而言，我附上了#sidebar。此外，您不必向此 div 添加 .affix 类或 data-offset-top="XXX"。下面的 Javascript 可以解决这个问题。
<aside class="span3">
<div id="sidebar">
<p>some content</p>
</div>
</aside>
CSS(the below code doesn't exist on bootstrap.css, I copied it from http://twitter.github.io/bootstrap/assets/css/docs.css)
CSS（以下代码在 bootstrap.css 上不存在，我从http://twitter.github.io/bootstrap/assets/css/docs.css复制了它）
.affix-bottom {
position: absolute;
top: auto;
bottom: 400px;
}
Javacriptthe following js will change class of #sidebar from .affix to .affix-bottom according to how much page is scrolled
Javacript以下JS将根据有多少页面滚动更改类#sidebar从.affix到.affix底
$('#sidebar').affix({
offset: {
bottom: 450
}
});
Indeed on small resolutions #sidebar will overlap other elements. To solve this use bootstrap's media queries http://twitter.github.io/bootstrap/scaffolding.html#responsive
事实上，在小分辨率下#sidebar 会与其他元素重叠。要解决此问题，请使用引导程序的媒体查询http://twitter.github.io/bootstrap/scaffolding.html#responsive
As Sarapreviously pointed out, you can use something like..
正如Sara之前指出的，你可以使用类似..
@media(max-width:767px){
.affix {
position: static;
width: auto;
top: 0;
}
}
..so that you make the #sidebar behave.
..这样你就可以让 #sidebar 表现出来。
Hope this helps somebody!
希望这对某人有帮助！
回答by efeder
I had the same issue, and my solution was to remove the affix behavior for smaller screen sizes. For example, to remove it for sizes below 1199 pixels:
我遇到了同样的问题，我的解决方案是删除较小屏幕尺寸的词缀行为。例如，要删除小于 1199 像素的尺寸：
#map {
@media (min-width: 1199px) {
&.affix-top {
}
&.affix {
position: fixed;
top: 20px;
bottom: 100px;
}
&.affix-bottom {
}
}
}
