具有固定位置的Bootstrap面板组手风琴

我正在使用面板组制作手风琴，如Javascript导航的“折叠”部分中所示：http://getbootstrap.com/javascript/#collapse 除了我希望手风琴作为用户向下滚动，因此我将它全部包装在引导程序中并添加了位置：固定为div的样式。不幸的是，一旦我滚动到底部并尝试展开手风琴，它将从屏幕底部展开。然而，当手风琴的位置不固定时，屏幕将会增长以适应手风琴的新高度。有没有办法让我的蛋糕也可以吃呢？具有固定位置的Bootstrap面板组手风琴

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

来源

2013-12-23 Jakotheshadows

我最终解决了这个问题，通过定义井的高度并在css中设置overflow-y为自动。现在，当它从屏幕上长出来时，它会得到一个滚动条，无论如何，我都可以到达手风琴的任何部分。

我只是在我遇到这个问题时为任何需要它的人实施了代码。我当时使用的解决方案使用内联样式，并且可能不是最大的，或者不一定完全符合您对特定情况的要求，所以我鼓励任何人在考虑这一点时考虑他们是否使用内联样式，以及如何定义自己的css规则来解决问题。

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

来源

2013-12-23 19:57:22 Jakotheshadows

具有固定位置的Bootstrap面板组手风琴

回答

相关问题