Ich habe diese Methode ( ihre Geige ) versucht , um ein scrollbares Menü mit Bootstrap zu aktivieren, aber mit diesem Ansatz erweitert das scrollbare Menü seinen Container - Geige - das nicht scrollbare Menü tut dies korrekt nicht.
Wie kann ich das beheben? Vorschläge zu anderen mit Bootstrap kompatiblen Ansätzen sind ebenfalls willkommen!
Als Referenz ist hier der HTML-Code aus der Geige der ersten Methode:
<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-group"></i> <b>My Groups</b></a>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">User</a>
</li>
<li>
<a href="#">Administrators</a>
</li>
<li>
<a href="#">Some Other Group</a>
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-user"></i> <b>My Roles</b></a>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
<a href="#">Core Users</a>
</li>
<li>
<a href="#">Admin</a>
</li>
<li>
<a href="#">Some Other Role</a>
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>
<ul class="dropdown-menu">
<li class="disabled">
<a href="#"><i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i></a>
</li>
</ul>
</li>
</ul>
Und das CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
display:inherit!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;
top:0!important;
left:0!important;
width:100%;
height:auto;
max-height:500px;
margin:0;
border-left:none;
border-right:none;
-webkit-border-radius:0!important;
-moz-border-radius:0!important;
-ms-border-radius:0!important;
-o-border-radius:0!important;
border-radius:0!important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none
}
css
twitter-bootstrap
scrollable
eliashdezr
quelle
quelle
Antworten:
Ich denke, Sie können dies vereinfachen, indem Sie einfach die erforderlichen CSS-Eigenschaften zu Ihrer speziellen scrollbaren Menüklasse hinzufügen.
CSS:
HTML
Arbeitsbeispiel: https://www.bootply.com/86116
Bootstrap 4
Ein weiteres Beispiel für Bootstrap 4 mit Flexbox
quelle
Sie können die integrierte CSS - Klasse verwenden pre-scrollbaren in Bootstrap - 3 innerhalb der Spanne Element der Drop - Down - und es funktioniert sofort ohne benutzerdefinierte CSS - Implementierung.
quelle
Für CSS fand ich, dass die maximale Höhe von 180 für die Handy-Landschaft 320 besser ist, wenn Browser-Chrom angezeigt wird.
Um sichtbare Bildlaufleisten hinzuzufügen, sollte dieses CSS den folgenden Trick ausführen:
Die Änderungen werden hier wiedergegeben: https://www.bootply.com/BhkCKFEELL
quelle
Machen Sie alles in der Linie des UL-Tags
quelle
Ich behebe dieses Problem einfach in meinem Projekt.
CSS-Code
HTML Quelltext
quelle
Ich hoffe, dieser Code funktioniert gut, versuchen Sie dies.
CSS-Datei hinzufügen.
HTML Quelltext:
quelle