Ich arbeite an einer Web-App, für die ich zwei unabhängig scrollbare Bereiche auf größeren Bildschirmen haben möchte: einen Hauptinhaltsbereich auf der linken Seite und eine kleinere Seitenleiste auf der rechten Seite.
Ich habe es geschafft, ein solches Layout in CSS mit absolute positioning und overflow properties zu implementieren. Siehe hierzu JSFiddle: Ссылка
Das ist großartig, aber ich versuche auch, Bootstrap (3.1.1) zu verwenden, um die Seite responsiv und für die Komponenten / Styling zu machen. Wie auch immer, ich weiß nicht, wie es geht.
Grundsätzlich möchte ich Bootstrap-Konventionen (die Spaltenklassen usw.) verwenden, um auf mobilen Bildschirmen den rechten Bereich unter dem linken Bereich zusammenzufalten (oder ganz zu verschwinden) die volle Breite einnehmen. Dies scheint jedoch unmöglich zu sein, wenn absolute positioning für das größere Bildschirmlayout verwendet wird.
Wie kann ich versuchen, dieses Problem anzugehen?
Ich gab Skellys Bootply hier ab, während ich col-xs-12 und hidden-xs benutzte.
Ich bevorzuge das, weil es Medienabfragen in einer CSS-Datei vermeidet.
Sie brauchen Bootstrap nicht, um das zu tun, was Sie wollen. Sie können Ihr vorhandenes CSS einfach wie folgt ändern:
%Vor%Und dann, in Ihrer Medienabfrage für mobile Bildschirme, machen Sie sowohl #links als auch #rechts: none, width: 100% und height: auto;
Wenn Sie wirklich Bootstrap verwenden wollen, setzen Sie einfach #left und #right in die folgende Struktur:
%Vor%Tags und Links html css responsive-design twitter-bootstrap twitter-bootstrap-3