Twitter Bootstrap Affix的侧边栏溢出 [英] Overflow of sidebar with Twitter Bootstrap Affix

问题描述

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

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:

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

推荐答案

来自Bootstrap文档（ http://getbootstrap.com/2.3.2/javascript.html#affix ）..

From the Bootstrap docs (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来设置元素固定后的宽度。例如：

So you need some CSS for affix to set the width for the element when it becomes fixed. Such as:

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

Bootply上的演示： http://bootply.com/73864

Demo on Bootply: http://bootply.com/73864

有关Bootstrap词缀的相关答案：

如何创建粘性使用引导程序3的左侧边栏菜单？

Twitter-bootstrap 3在调整窗口大小和页脚时粘贴了侧边栏重叠内容

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

这篇关于Twitter Bootstrap Affix的侧边栏溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！