Wie kann verhindert werden, dass ein Bootstrap-Dropdown-Menü seinen Container erweitert, wenn es scrollbar gemacht wird?

Scrollbares Menü mit Bootstrap – Containererweiterung verhindern

Bei der Implementierung eines scrollbaren Menüs mit Bootstrap ist es wichtig, das Problem zu vermeiden, dass das Menü seinen Container erweitert. Hier ist eine Lösung, die dieses Problem direkt angeht:

Fügen Sie in Ihrem CSS die folgenden Stile zur scrollbaren Menüklasse hinzu:

<code class="css">.scrollable-menu {
    height: auto;
    max-height: <desired max-height>;
    overflow-x: hidden;
}</code>

Zum Beispiel:

<code class="css">.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}</code>

Wenden Sie in Ihrem HTML die scrollable-menu-Klasse auf das Dropdown-Menü an, das Sie scrollbar machen möchten:

<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>

Mit diesen Änderungen hat Ihr scrollbares Menü eine maximale Höhe von 200 Pixel und verhindert so, dass es erweitert wird enthaltenden Behälter. Passen Sie die Eigenschaft „max-height“ nach Bedarf an Ihre Designanforderungen an.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass ein Bootstrap-Dropdown-Menü seinen Container erweitert, wenn es scrollbar gemacht wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!