Home > Article > Web Front-end > How to Prevent Bootstrap Scrollable Menu Container Expansion?
Scrollable Menu with Bootstrap: Preventing Container Expansion
Original Issue:
Attempts to implement a scrollable menu with Bootstrap using a certain method result in an unwanted expansion of the menu's container.
Solution:
To resolve this issue, you can directly apply CSS properties to your scrollable menu class:
<code class="css">.scrollable-menu { height: auto; max-height: 200px; overflow-x: hidden; }</code>
This will contain the menu within its own space, preventing it from expanding the container.
Updated 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>
Alternative Approaches Compatible with Bootstrap:
Bootstrap 4/5:
Set max-height on the .dropdown-menu class:
<code class="css">.dropdown-menu { max-height: 280px; overflow-y: auto; }</code>
Horizontal Menu Using Flexbox:
Consider using flexbox for a horizontal menu alternative:
https://codeply.com/p/shJzHGE84z
The above is the detailed content of How to Prevent Bootstrap Scrollable Menu Container Expansion?. For more information, please follow other related articles on the PHP Chinese website!