html - Bootstrap Collapse 双向打开

Question

后续问题:

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

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

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

Answer 1

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

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