Bootstrap 3.1.0：加贴太长时间 [英] Bootstrap 3.1.0: affix too long

问题描述

我正在使用 Bootstrap 3.1.0 。当一个词缀对于视口变得太长时，它会被切断，从不显示底部项目。

I am using Bootstrap 3.1.0. When an "affix" gets too long for the viewport, it gets cut off, never showing bottom items.

是否有可能让Bootstrap的词缀表现得像用户是否仍然可以从上到下滚动完整的词缀？

Is there a possibility to have Bootstrap's affix behave in a way that it is still possible for the user to scroll the complete affix from top to bottom?

有问题的例子：

<div class="container">
    <div class="row">

        <div class="col-md-3">
            <div class="list-group" id="sidebar">
                <a href="#" class="list-group-item">Long</a>
                <a href="#" class="list-group-item">list</a>
                <a href="#" class="list-group-item">with</a>
                <a href="#" class="list-group-item">many</a>
                <a href="#" class="list-group-item">entries</a>
                ...
                <a href="#" class="list-group-item">29. Last</a>
            </div>
        </div>

        <div class="col-md-9">
          ... regular content    
        </div>

    </div>
</div>

我希望我的jsFiddle能够解释这个问题。

推荐答案

我希望它可以帮到你：

只需添加 overflow-y

Jsfiddle ： http://jsfiddle.net/Ja3XT/1/

已添加Css：

#sidebar{
 max-height: 100%;
 overflow-y: auto;   
}

评论后更新：

小提琴： http://jsfiddle.net/F4FZL/1/

JS：

$('#sidebar').affix({
    offset: {
        top:100,
        bottom:0
    }
});


$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});

这篇关于Bootstrap 3.1.0：加贴太长时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！