Hej heinetz,
Variante a)
@media screen and (max-width: 767px) { #sidebar.toggled { width: 250px; } ... }
Desktop first? Nicht gut!
Besser kein Bootsrap und:
/* Darstellung für kleine Bildschirme (KEIN Ausblenden, Nutzer wollen keine Crippleware!!! */
#sidebar.toggled { /* Wenn möglich auf den ID-Selektor verzichten */
foo: bar; /* z.B. Darstellung als Akkordion */
}
/* Darstellung für große Bildschirme */
@media screen and (min-width: 60em) {
#sidebar.toggled {
width: 15em;
}
...
}
Vergiss Pixel, meistens sind (r)em
oder vw
sinnvoller für horizontale Angaben - oder eine Kombination: calc(1rem + 1vw)
Variante b) Auf meiner Website mit responsive Grid (Bootstrap) gibt es eine Sidebar mit Menü. Die Sidebar soll sich mittels Button ein- und ausblenden lassen. Das würde ich mit Javascript (bzw. jQuery) einfach realisieren können.
Siehe Post von @Gunnar Bittersmann
Was sagt ihr?
Klopp Bootstrap in die Tonne - da gehört es hin ;-)
Mach es selber. Wir helfen, es gibt aber auch viele Anleitungen und Erklärungen im Web, wodrauf es bei so was ankommt, z. B. von Leonie Watson - damit es funktioniert kommt es nämlich gar nicht so sehr auf CSS an - dsiplay-Eigenschaften oder ähnliches ab einem bestimmten Breakpoint zu ändern ist eine Kleinigkeit.
Wichtiger ist, dass die Bedienung mit allen UserAgents möglich ist. Da kommt WAI-ARIA ins Spiel.
Sonst klappt es nur für die Mausnutzer, die allmählich in der Minderheit sind...
Das ist in Deutschland derzeit zwar noch anders (Desktop 58%, Smartphone+Tablet 42%), aber der Trend geht auch hier in diese Richtung. Bleibt noch zu bedenken, dass unter den Desktop-Nutzern auch Menschen sind, die keine Maus nutzen!
Außerdem ist das hier die erstbeste Statistik - ich habe auch schon welche gesehen, die für Deutschland ein 50/50-Verhältnis angeben. Allen gemeinsam ist der Trend weg vom Desktop hin zu mobilen Geräten!
Marc