调整窗口大小和页脚时，Twitter-bootstrap 3 附加侧边栏重叠内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21028843/
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 3 affixed sidebar overlapping content when window resized and also footer
提问by pwiz
I am having problems with an overlapping sidebar when I use affix for bootstrap 3 and resize the window. Is there a way to add some css class so that instead of overlapping the column, the menu affixes to the top?
当我将词缀用于引导程序 3 并调整窗口大小时，我遇到了重叠侧边栏的问题。有没有办法添加一些 css 类，以便菜单不会与列重叠，而是贴在顶部？
Also the column is overlapping the footer. Any help would be greatly appreciated. It seems that many people are having this same issue.
该列也与页脚重叠。任何帮助将不胜感激。似乎很多人都遇到了同样的问题。
Here is the HTML:
这是 HTML：
<div class="container">
<div class="row">
<div class="col-md-4 column">
<ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
<li><a href="#software"><b>Software</b></a></li>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#costs">Costs</a></li>
</ul>
</ul>
</div>
<div class="col-md-8 column">
<p>blah, blah, blah</p>
<hr>
<a class="anchor3" id="top" name="software"></a>
<h2 style="font-weight:bold;">Software</h2>
<p>
blah, blah, blah...</p><br><br>
</div>
</div>
</div>
Here is the CSS:
这是CSS：
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 100px;
}
回答by Zim
Demo: http://bootply.com/104634
You should only apply the affixwhen the screen width is larger that 992 pixels (the breakpoint at which Bootstrap col-md-*starts vertically stacking).
您应该只affix在屏幕宽度大于 992 像素（Bootstrapcol-md-*开始垂直堆叠的断点）时应用 。
.affix-top,.affix{
position: static;
}
@media (min-width: 992px) {
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 100px;
}
}
Also, if you want to use the affixon smaller widths you could change your columns to col-sm-*or col-xs-*.
此外，如果您想使用affix较小的宽度，您可以将列更改为col-sm-*或col-xs-*。
回答by clamchoda
I wanted the affix to be responsive when resizing the columns so I came up with a pretty simple solution.
我希望词缀在调整列大小时具有响应性，因此我想出了一个非常简单的解决方案。
What we'll do is match the width of our affix to the width of the column it is in when the grid is resized.
我们要做的是将我们的词缀的宽度与调整网格大小时它所在的列的宽度相匹配。
To do this all you need to do is give your column and affix an Id. (Or someway to reference the elements with javascript)
为此，您需要做的就是为您的专栏提供一个 ID。（或以某种方式使用 javascript 引用元素）
I went for a javascript solution.
我去了一个 javascript 解决方案。
function fixAffix() {
try {
// Bootstrap affix will overflow columns
// We'll fix this by matching our affix width to our affixed column width
var bb = document.getElementById('affixColumn').getBoundingClientRect(),
columnWidth = bb.right - bb.left;
// Make sure affix is not past this width.
var affixElm = document.getElementById('affixDiv');
affixElm.style.width = (columnWidth - 30) + "px";
// We can also define the breakpoint we want to stop applying affix pretty easily
if (document.documentElement.clientWidth < 975)
affixElm.className = "";
else
affixElm.className = "affix";
}
catch (err) {
alert(err);
}
}
$(window).resize(function () {
fixAffix();
});
$(document).ready(function () {
fixAffix();
});
I've included code to remove the affix at a specified breakpoints. That's specific to my application, but you'll most likely want to do something like this too to stop the affix on smaller devices.
我已经包含了在指定断点处删除词缀的代码。这是特定于我的应用程序的，但您很可能也想执行类似的操作以停止在较小设备上的附加。
