twitter-bootstrap - 带有 Twitter Bootstrap Affix 的侧边栏溢出

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。


6年前关闭。







Improve this question




我正在尝试通过 twitter bootstrap 使用 affix 插件，但我不知道如何在父容器中限制它，我创建了以下示例来显示我的问题:

问题演示: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>

正如您所看到的，当您滚动它时它会溢出侧边栏，当它到达底部时它也不会贴在页面底部。

Answer 1

来自 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.

所以你需要一些 CSS 用于 affix设置元素固定时的宽度。如:

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Bootply 演示: http://bootply.com/73864

关于 Bootstrap 词缀的相关答案:
How to create a sticky left sidebar menu using bootstrap 3?
Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer