Bootstrapのcollapseコンポーネントは非常に便利ですが、子要素にtransitionを適用しようとすると問題が発生することがあります。これは、collapseが表示されていない時、要素がdisplay: noneになってしまうためです。
この問題を解決するには、次のCSSを追加します：
.collapse:not(.show) {
display: block;
}このコードは、collapseが展開されていない状態でも、要素がdisplay: noneではなく、display: blockになるようにします。これにより、子要素にtransitionが正しく適用されるようになります。