twitter-bootstrap 带有 Twitter Bootstrap Affix 的侧边栏溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18269306/
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
Overflow of sidebar with Twitter Bootstrap Affix
提问by John Mellor
I'm trying to use the affix plugin by twitter bootstrap but I can't figure out how to constrain it within the parent container, i've created the following example to show my problem:
我正在尝试通过 twitter bootstrap 使用词缀插件，但我不知道如何将它限制在父容器中，我创建了以下示例来显示我的问题：
Problem demo: http://www.codeply.com/go/DvcRXkeFZa
问题演示：http: //www.codeply.com/go/DvcRXkeFZa
<div class="container">
<div class="row">
<div class="col-md-3 column">
<ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
<li><a href="#software"><b>Software</b></a></li>
<li><a href="#features">Features</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#costs">Costs</a></li>
</ul>
</div>
<div class="col-md-9 column">
<h1>Blah, blah, blah</h1>
<hr>
<a class="anchor3" id="top" name="software"></a>
<p>
content here that scrolls...
</p>
</div>
</div>
</div>
As you can see when you scroll it overflows out of the sidebar, it also doesn't affix to the bottom of the page when it reaches the bottom.
正如您所看到的，当您滚动它时，它会溢出侧边栏，当它到达底部时，它也不会贴在页面底部。
回答by Zim
From the Bootstrap docs (http://getbootstrap.com/2.3.2/javascript.html#affix)..
来自 Bootstrap 文档 ( http://getbootstrap.com/2.3.2/javascript.html#affix)..
Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.
当心！您必须管理固定元素的位置及其直接父元素的行为。位置由词缀、词缀顶部和词缀底部控制。请记住在词缀开始时检查可能折叠的父级，因为它正在从页面的正常流中删除内容。
So you need some CSS for affixto set the width for the element when it becomes fixed. Such as:
因此affix，当元素固定时，您需要一些 CSS来设置元素的宽度。如：
#sidebar.affix {
position: fixed;
top: 0;
width:225px;
}
Demo on Bootply: http://bootply.com/73864
Bootply 上的演示：http://bootply.com/73864
Related answers on Bootstrap affix:
How to create a sticky left sidebar menu using bootstrap 3?
Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer
Bootstrap 词缀的相关答案：
How to create a sticky left sidebar menu using bootstrap 3?
调整窗口大小和页脚时，Twitter-bootstrap 3 附加侧边栏重叠内容
回答by netcult
In an answer to @FreezeDriedPop I found this to work for me:
在对@FreezeDriedPop 的回答中，我发现这对我有用：
var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');
