부트스트랩을 사용한 스크롤 가능 메뉴: 컨테이너 확장 방지
원래 문제:
구현 시도 특정 방법을 사용하는 Bootstrap의 스크롤 가능 메뉴는 메뉴 컨테이너가 원치 않게 확장되는 결과를 낳습니다.
해결책:
이 문제를 해결하려면 CSS 속성을 직접 적용할 수 있습니다. 스크롤 가능한 메뉴 클래스:
<code class="css">.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }</code>
이것은 자체 공간 내에 메뉴를 포함하므로 컨테이너가 확장되지 않습니다.
업데이트된 HTML:
<code class="html"><ul class="dropdown-menu scrollable-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Action</a></li> <!-- ... --> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> </ul></code>
Bootstrap과 호환되는 대체 접근 방식:
Bootstrap 4/5:
.dropdown에 최대 높이 설정- 메뉴 클래스:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Flexbox를 사용한 수평 메뉴:
수평 메뉴 대안으로 Flexbox 사용을 고려해보세요:
https://codeply. com/p/shJzHGE84z
위 내용은 부트스트랩 스크롤 가능 메뉴 컨테이너 확장을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!