Bootstrap 5 アコーディオンを展開すると幅が広すぎる

Question

アコーディオン コンポーネントが親要素の幅に合わせて展開されることを期待していましたが、展開するとコンポーネント自体だけでなく親要素も展開され、左側のペインが大幅に圧縮されてしまいます。望ましい動作を実現するには何をする必要がありますか?ご回答いただければ幸いです。

リーリー

アコーディオンのタイトルとその内容の幅を少し調整してみましたが、うまくいきませんでした。

Answer 1

#right-pane 要素は flex-basis または width を明示的に宣言していないため、必要なスペースを占有します。アコーディオンを閉じると、コンテンツの幅が狭くなるため、期待どおりに動作します (その後、flex-grow: 1 in -1 クラスにより、残りのスペースを埋めるために拡大されます)。ただし、アコーディオンのコンテンツが表示されるとき、コンテンツは可能な限り多くの水平スペースを占有しようとします。

これを回避するには、#right-pane

要素に何らかの flex-basis または width を設定することを検討してください (例: width: 25% #) ##w-25`ここから:

リーリー