So implementieren Sie Bildlaufleisten im Bootstrap

Implementierungsmethode: 1. Verwenden Sie die Schriftsatzklasse „

<div class="pre-scrollable">“. 2. Verwenden Sie „

“ implementiert Bildlaufleisten.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

So implementieren Sie Bildlaufleisten in Bootstrap

Erstens: Fügen Sie einen Bootstrap-Stil hinzu, um Bildlaufleisten hinzuzufügen

Tatsächlich , sofern es sich im Klassenattribut des entsprechenden Moduls befindet und vorab scrollbar ist.

Fügen Sie zum Beispiel vorab scrollbare Elemente in

hinzu:

<div class="pre-scrollable">

Zweitens: Fügen Sie Bildlaufleisten hinzu, indem Sie den Überlauf festlegen

<div style=" overflow:scroll; width:400px; height:400px;”></div>

Denken Sie daran, dass die Breite und Höhe festgelegt werden müssen, sonst funktioniert es nicht, aber wenn Wenn es überschritten wird, wird unten eine Bildlaufleiste angezeigt, daher ist dies nicht die beste Wahl. Denken Sie daran, dass Breite und Höhe festgelegt werden müssen, sonst funktioniert es nicht ist das, wenn die Breite und die Höhe nicht größer sind, nur eine Zeile

Drei: Geben Sie einfach das Überlaufattribut als auto für das div direkt an, aber die Höhe des div muss wie folgt angegeben werden:

<div style=" overflow-y:auto; overflow-x:auto; width:400px; height:400px;”></div>

Wenn Sie möchten, dass eine horizontale Bildlaufleiste angezeigt wird, dann: overflow-x :auto

Ähnlich lautet die vertikale Bildlaufleiste: overflow-y:auto

Wenn das div in anderen Objekten wie td enthalten ist, wird das Position kann auf relativ gesetzt werden: Position: relativ Y-Achsen-Bildlaufleisten bzw.

Verwandte Empfehlungen:

Bootstrap-Tutorial