Bootstrap Accordion - 设置为特定高度

Question

我有一个带有一英里长的列表的bootstrap手风琴，我想将OPENED高度设置为大约200px。当我在CSS中执行此操作时，手风琴打开，但到达全高，THEN在打开后设置为200px。

我试图不仅设置崩溃类，而且还设置了类中的折叠和折叠，所有这一切都使得手风琴弹出打开而没有动画。

CSS：

.collapse.in, .collapse{
  height: 200px;
  overflow-y: scroll;
}

我需要在哪里设置高度，以便手风琴只能打开200px并以200px停止动画？

示例：http://jsfiddle.net/murphy1976/c8nw2jmo/1/

Answer 1

待打开页面的内容高度更大。 Bootstrap手风琴可以显示所有内容。

如果您将包装html元素设置为固定高度，则可以正常工作，如updated fiddle

中所示

<form id="max200">

#max200 {
    height: 200px;
  overflow-y: scroll;
}

Answer 2

尝试这个，我也编辑你的jsfiddle例子 检查我确定它会正常工作

scp vagrant@<vm_ip>:<path_to_file> <path_to_dest_on_your_host>

Answer 3

没关系。我造型错误的元素。  对于想要这样做的人来说，这是一个HEADS UP。设计风格，手风琴将自动获取其内容的高度。如果将.well设置为特定高度，则折叠动画将平滑地缓和到所需高度。

请参阅jFiddle示例，了解我放置.well的位置，然后根据自己的喜好修改CSS。

Answer 4

Bootstrap 4.5.0版。请检查旧版本。

这完成了工作。

.collapse,
.collapsing {
  overflow: auto;
  max-height: 50vh;
}

.collapsing是在手风琴的过渡开始时添加的，并在结束过渡时被删除