접힌 아코디언 세그먼트의 높이 제한 Bootstrap 5 Vue3

Question

Vue3 및 bootstrap 5를 사용하여 웹 애플리케이션을 구축하고 있습니다. 하지만 내 생각에 이 질문은 부트스트랩에만 관련이 있는 것 같습니다. 내가 원하는 것은 축소된 아코디언 세그먼트의 높이를 제한하여 해당 내용이 길 때 다른 세그먼트가 너무 낮아지지 않도록 하는 것입니다.

내가 시도한 것은 .collapsing 클래스에 max-height 및 Overflow: auto를 추가하는 것이었고 아코디언 클래스에 "collapsing"을 추가했지만 아코디언은 해당 높이로 스크롤하고 잠시 후 전체 확장으로 점프합니다. node_modules 부트스트랩 폴더에서 _accordion.scss를 보고 "overflow-anchor"를 auto로 변경했지만 아무것도 변경되지 않았습니다.

으아아아

이 예제 파일에서는 부트스트랩("Flush" 아래)에서 아코디언 예제를 가져왔으므로 내 vue 파일은 다음과 같습니다.

으아아아

어떤 아이디어가 있나요? 감사합니다

Answer 1

찾았어요! 클래스를 아코디언 본체에 넣어야 합니다. 먼저 클래스를 정의하세요. 예를 들어

으아악

그런 다음 Accordion-body와 동일한 괄호 안에서 호출하세요