Die Boostrap dashboard example verbirgt die Sidebar-Navigation vollständig (nicht zusammengelegt oder gestapelt), wenn die Bildschirmbreite weniger als 768px beträgt. Wie würdest du das Mobile mit einem solchen Setup unterstützen?Die Bootstrap-Dashboard-Beispiel-Seitenleiste sichtbar/verfügbar auf Mobilgerät
Antwort
Die CSS für die Sidebar auf ‚größer als‘ mobile Ansicht angegeben wird:
@media (min-width: 768px)
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
Nach dem er auf seinen Standard von display:none
.sidebar {
display: none;
}
kehrt würden Sie müssen ihre entweder ändern Standard-CSS, oder fügen Sie eine neue media query, z
@media (max-width: 768px)
Um Ziel spezifisch kleinere Geräte. Welche Art von Styling Sie anwenden möchten, hängt davon ab, wonach Sie suchen.
Danke, was würdest du empfehlen? Stapeln Sie es? Zu irgendwo einklappen? Ich würde lieber zusammenbrechen, aber die Haupt-Kopfzeile an der Spitze ist bereits in der normalen Position zusammengebrochen. –
Es ist ziemlich subjektiv, vielleicht kollabieren und unter dem Hauptmenü stapeln ..? – SW4
Eine Option wäre, sie einfach außerhalb des Bildschirms zu verstecken, und dann ein kleines Grabber-Handle (ähnlich wie das Hamburger-Menü für das Hauptnavigationssystem funktioniert) zu verwenden, um es zu enthüllen. Wenn es enthüllt wird, gleitet es von der Bühne nach links, um das Fenster zu füllen, und scrollt nach Bedarf, bis der Benutzer es ablehnt/zusammenfaltet. –
Eine weitere Option besteht darin, das Dashboard und die Off-Canvas-Sidebar-Vorlagen zu kombinieren. Dieses Layout ermöglicht die Seitenleiste ein- und ausgeschaltet werden/auf dem Bildschirm bei kleineren Breiten ...
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
margin-left: 10px;
}
}
/* Sidebar navigation */
.nav-sidebar {
background-color: #f5f5f5;
margin-right: -15px;
margin-bottom: 20px;
margin-left: -15px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}
- 1. Handsontable auf Mobilgerät bearbeiten
- 2. Responsive auf Mobilgerät mit Tabellen, die nicht in iframe funktionieren
- 3. videogular vg-scrub-bar auf android mobilgerät
- 4. [CSS] -Swap-Zeile bei Vorschau auf Mobilgerät
- 5. fullcalendar mehrere Zellen auf Mobilgerät auswählen?
- 6. Diagramm Ladezeit und Animation langsam auf Mobilgerät
- 7. Youtube iFrame API setPlaybackQuality auf Mobilgerät ignoriert
- 8. Autoplay Video in Mobilgerät
- 9. Mobilgerät wenn Anweisung
- 10. Javascript Mobilgerät notification
- 11. Android: Fahrzeugentfernung mit Mobilgerät berechnen
- 12. navigator.userAgent für Mobilgerät zu erkennen?
- 13. Django - Mobilgerät in Sichten erkennen
- 14. Berühren (klicken) Mobilgerät funktioniert nicht
- 15. Erkennen, ob das Compact Framewok auf dem Mobilgerät installiert ist
- 16. Bootstrap - Dropdown - Menü nicht vollständig auf Mobilgerät sichtbar
- 17. ein In den Warenkorb-Taste auf dem Mobilgerät
- 18. Das Element vom Ziehen des Bildschirms auf dem Mobilgerät abweisen
- 19. Erstellen einer 360-Foto-Erfahrung auf iOS-Mobilgerät
- 20. ermöglicht das Ziehen und Ablegen auf einem Touchscreen-Mobilgerät
- 21. Monitor CPU-Auslastung pro Thread auf Windows-Mobilgerät
- 22. Verhindern, einen Link zu klicken, wenn auf Mobilgerät rollen
- 23. Zugriff auf meine Webanwendung über Clientcomputer und Mobilgerät nicht möglich
- 24. Zugriff auf localhost Server von PC verbunden Android Mobilgerät
- 25. Wie wird die Ausführung fortgesetzt, wenn das Mobilgerät schläft?
- 26. AWS-Site nicht von Mobilgerät aus erreichbar
- 27. Mobilgerät wird als nicht mobiles Gerät erkannt
- 28. E-Mails als SMS an Mobilgerät weiterleiten
- 29. drahtlose Verbindung zwischen Mobilgerät und PC
- 30. Windows 10 UWP UI Design für Mobilgerät
Sehen Sie diese http://getbootstrap.com/css/#responsive-utilities. –
Damit dies mobilfreundlich ist, müsste nur die Klasse ".Sidebar" entfernt werden. der negative Versatz ("sm-md-offset-2" und für "sm") auf dem Hauptbehälter; Dadurch wird die Seitenleiste in eine Rasterspalte umgewandelt. Es wäre für Sie entscheiden, ob Sie es über oder unter dem Hauptbehälter erscheinen soll. – MackieeE
Danke, @MackieE. Das würde funktionieren, Post als Antwort! –