Bootstrap面板组手风琴具有固定位置 [英] Bootstrap panel-group accordion with fixed position

问题描述

我使用面板组制作手风琴，如JavaScript nav的折叠部分所示， http://getbootstrap.com/javascript/#collapse
除了我想要手风琴跟随屏幕，因为用户向下滚动，所以我把它包装在一个引导井和添加位置：固定到div的样式。不幸的是，一旦我滚动到底部，并尝试扩大手风琴，它扩大了屏幕的底部。然而，当手风琴不是位置固定时，屏幕将增长以适应手风琴的新高度。有没有办法我可以有我的蛋糕，吃它吗？

I'm using the panel-group to make an accordion as shown in the "Collapse" section of the Javascript nav at http://getbootstrap.com/javascript/#collapse Except that I want the accordion to follow the screen as the user scrolls down, so I wrapped it all in a bootstrap well and added position:fixed to the div's style. Unfortunately, once I scroll to the bottom and try to expand the accordion, it expands off the bottom of the screen. When the accordion isn't position fixed, however, the screen will grow to accommodate the new height of the accordion. Is there a way I can have my cake and eat it too?

<div class="well" style="position: fixed"> <!--Causes this div to grow off the screen-->
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a id="panelOneLabel" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                <!--a bunch of content here-->
                </div>
            </div>
        </div>
        <!--a bunch of other similar panel panel-defaults-->
    </div>
</div>

推荐答案

在css中设置overflow-y为auto。现在，当它成长在屏幕上，井得到一个滚动条，允许我到手风琴的任何部分，无论什么。

I ended up solving the problem by defining a height for the well and setting the overflow-y to auto in css. Now when it grows off the screen the well gets a scroll bar that allows me to get to any part of the accordion no matter what.

我刚刚necro'd代码我实现时，我有这个问题的任何人谁想要它。我在当时使用的解决方案使用内联样式，可能不是最大的，或者一定是你想要的，你的特殊情况，所以我鼓励任何人看这个想想自己的选择是否使用内联样式以及如何定义自己的css规则来解决问题。

I just necro'd the code that I implemented when I was having this problem for anyone who wants it. The solution I went with at the time uses inline styling and probably isn't the greatest, or necessarily exactly what you want for your particular situation so I'd encourage anyone looking at this to think about their own choice of whether or not to use inline styling, and how to define their own css rules to solve the problem.

<div data-spy="affix" style="width: inherit; height: 100%; max-height: 80%; overflow-y: auto" class="well">...somewhere in here is my accordion...</div>

这篇关于Bootstrap面板组手风琴具有固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！