twitter-bootstrap – 使用Twitter Bootstrap Affix溢出侧边栏

发布时间：2020-12-18 00:24:05 所属栏目：安全来源：网络整理

导读：我正在尝试使用twitter bootstrap的affix插件,但我无法弄清楚如何在父容器中约束它,我创建了以下示例来显示我的问题：问题演示：http://www.codeply.com/go/DvcRXkeFZa div class="container" div class="row" div class="col-md-3 column" ul id="sidebar"

我正在尝试使用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>

正如您所看到的那样,当它滚动时,它会溢出侧边栏,当它到达底部时也不会粘贴到页面底部.

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!