Bootstrap 折叠在两个方向打开

Question

以下问题：

我尝试用 div 元素重建 table，这样我就可以使用 Metafizzy Isotope 来过滤它们。到目前为止，一切都很好。每行都有一个按钮，可以打开/关闭附加的手风琴/折叠。折叠应该从上到下滑动打开，所以它有两行，所以它有两个 li 元素。但是为了保持排序，我不得不将我的折叠填充到我的第一个 li 元素中。就在那时，坍塌开始将上方的 div 元素推到顶部，直到没有 space 剩余，然后向下直至完全打开。

https://codepen.io/paulhaem/pen/ZJELJr

感谢您就如何解决此问题提出任何建议！

Answer 1

您当前将内容置于 min-height: 60px; align-items: center; 所在行的中心位置。但是如果你展开折叠元素，你的内容的高度会增加超过 60 像素，因此你的折叠元素也会上升。使用您当前的标记和样式，您可以通过向 grid-item__line 提供 padding-top 和 padding-bottom 来解决问题。像

li.grid-item__line {
    padding-top: 15px;
    padding-bototm: 14px;
    ...
}