컨테이너를 확장하지 않고 부트스트랩으로 스크롤 가능한 메뉴를 만드는 방법은 무엇입니까?

Bootstrap을 사용한 스크롤 가능 메뉴 - 메뉴 확장 컨테이너

문제

제공된 방법을 사용하여 Bootstrap으로 스크롤 가능 메뉴 생성 seharusnya가 아닐 때 메뉴가 컨테이너를 확장하게 됩니다. 이 문제를 어떻게 해결할 수 있습니까?

Bootstrap 5용 솔루션

Bootstrap 5의 경우 다음 CSS를 적용합니다.

.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

Bootstrap 4용 솔루션

Bootstrap 4의 경우 위와 동일한 CSS를 적용합니다.

Bootstrap 3의 대체 솔루션

또는 Bootstrap 3의 경우 다음 CSS 및 HTML을 추가합니다.

CSS

.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

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="#">Another action</a></li>
</ul>

위 내용은 컨테이너를 확장하지 않고 부트스트랩으로 스크롤 가능한 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!