当第一个类型和最后一个类型是同一个子类型时，动态引导可折叠面板显示问题

Question

动态创建手风琴子对象时，在大多数情况下，您有多个子对象，因此第一个类型和最后一个类型工作得很好。有一个例子，手风琴只有1个孩子.在这种情况下，1 个子项既是第一个类型又是最后一个类型，导致显示奇怪的 CSS(没有半径和下边框(：

.accordion > .card:last-of-type {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion > .card:first-of-type {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

你如何解决这个问题？

Answer 1

解决此问题的最佳方法是添加将涵盖 1 个子场景的 CSS，并撤消以前的 CSS：

.accordion > .card:first-of-type:last-of-type {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}

确保此代码放在 bootstrap.css 之后。