Bootstrap Accordion - 设置为特定高度答案

【问题标题】：Bootstrap Accordion - Set to specific heightBootstrap Accordion - 设置为特定高度
【发布时间】：2020-06-25 03:06:45
【问题描述】：

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

我不仅尝试设置折叠类的样式，还尝试设置类中的折叠和折叠，所做的只是让手风琴在没有动画的情况下弹出。

CSS：

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

我需要在哪里设置高度以使手风琴仅打开到 200 像素并在 200 像素处停止动画？

【问题讨论】：

【解决方案1】：

要打开的页面的内容高度更大。 Bootstrap 手风琴是为显示所有而构建的。

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

<form id="max200">

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

【讨论】：

【解决方案2】：

没关系。我设计了错误的元素。任何想要这样做的人都应该注意。设置 WELL 样式，手风琴将自动调整其内容的高度。如果将 .well 设置为特定高度，则折叠动画将平滑地缓和到所需高度。

查看 jFiddle 示例以查看我放置 .well 的位置，然后根据您的喜好修改您的 CSS。

【讨论】：

对不起，但你的答案不清楚..如果我只向 .well 添加特定高度（没有 CSS，只有高度），那么它将显示所有内容..如果我将添加溢出-y：滚动;有了高度，它就会起作用，雷内已经说过了..

【解决方案3】：

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

.collapse.in, .collapse{
  height: 200px;
  overflow-y: scroll;
  max-height:200px;
}
#instrument.collapsing{
    max-height:200px;
}

【讨论】：

【解决方案4】：

引导程序 v. 4.5.0。也请检查旧版本。

这样就可以了。

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

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

【讨论】：