Question

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

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

有问题的例子：

<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>

I hope my jsFiddle exemplifies this problem

Answer 1

我希望它可以帮到你：

只需添加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');
});

Answer 2

我有同样的问题。我花了几个小时，最后我写了以下解决方案：

$('#sidebar').on('affix.bs.affix', function (e) {
    var $this = $(this),
        affix = $this.data('bs.affix'),
        offset = affix.options.offset,
        offsetBottom = offset.bottom;

    if (typeof offset != 'object') {
        offsetBottom = offset;
    }

    if (typeof offsetBottom == 'function') {
        offsetBottom = offset.bottom($this);
    }

    if ($this.outerHeight() + $this.offset().top + offsetBottom === Math.max($(document).height(), $(document.body).height())) {
        e.preventDefault();
    }
});

您可以在http://jsfiddle.net/F4FZL/10/查看代码，并在https://jsfiddle.net/F4FZL/10/embedded/result/播放演示。

希望这些信息有用。

Answer 3

在我的情况下，我在左侧有一个非常长的侧边栏，我想随时可以滚动。对我来说，解决方案比上述解决方案更容易：

$('[data-spy="affix"]').on('affix.bs.affix', function (e) {
    e.preventDefault();
    return;
});

Bootstrap 3.1.0：加贴太长时间

3 个答案: