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
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;
}
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! –