부트스트랩 스크롤 가능 메뉴 컨테이너 확장을 방지하는 방법은 무엇입니까?

부트스트랩을 사용한 스크롤 가능 메뉴: 컨테이너 확장 방지

원래 문제:

구현 시도 특정 방법을 사용하는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!