Mit Bootstrap 2 wäre die einfachste Methode, eine Spalte mit statischer Breite auf der linken Seite zu haben und die rechte Spalte flüssig zu haben. So etwas mit 200 Pixel Breite linke Spalte und das Recht zu füllen das Browserfenster.
%Vor%Ich habe versucht, einem normalen Container-Layout eine Mindestbreite hinzuzufügen, aber es hat ein seltsames Verhalten bei der Größenänderung:
%Vor%Hier ist auch eine JS-Geige, obwohl das Quad-Layout von js fiddle selbst sein eigenes Verhalten hinzuzufügen scheint.
Kurze Antwort auf Ihre Frage ist NEIN . Bootstrap 2 verwendet Medienabfragen und prozentuale Kennzahlen, um die Responsive-Grid-Layouts zu erreichen. Der Versuch, einen hybriden Ansatz mit Bootstrap 2 zu erstellen, ist völlig überflüssig.
Sie können diesen Ansatz versuchen. Benutze float:left; in der linken Spalte und gib ein padding-left:200px; in die rechte Spalte und das war's. Sie haben Ihr Layout gezeichnet. An der Unterseite wurde ein Clearfix hinzugefügt, damit Sie in Zukunft eine Fußzeile verwenden können, wenn Sie möchten. Auf diese Weise erhalten Sie Unterstützung für die meisten Browser.
Überprüfen Sie JsFiddle-Demo
HTML
%Vor%CSS
%Vor%Danach können Sie Javascript verwenden, um die Breite der linken Spalte und die Füllung der rechten Spalte bei der Fenstergrößenanpassung dynamisch anzupassen.
Sie können auch die folgenden Alternativen in Betracht ziehen:
1. Calc () (nur IE9 +)
Wenn Sie sich nicht für die IE8-Unterstützung interessieren, ist dies der einfachste Weg, dies zu erreichen. Sie können hier hier
erfahren2. Medienabfragen (nur IE9 +)
Sie können Media Queries genau wie Bootstrap verwenden, aber Sie können keine prozentualen Kennzahlen verwenden, um das zu erreichen, wonach Sie suchen. Sie können damit css-Eigenschaftswerte ändern und sie (mit Ihren benutzerdefinierten Einschränkungen) so anpas- sen.
3. Flexbox (nur IE10 + (teilweise IE9))
Wird großartig sein, aber jetzt wegen der Browser-Unterstützung nicht empfohlen.
4. Tabellen
Nehmen Sie diesen Thread , um zu erfahren, warum Sie nicht sollten. t verwende es.
Sie möchten also im Grunde, dass die rechte Spalte dem verfügbaren Platz entspricht.
Sie haben 5 Optionen, die nicht spezifisch für Bootstrap, sondern für allgemeines HTML / CSS sind:
1) verwende calc
%Vor%Dies schließt offensichtlich IE8 und andere Browser aus, die calc nicht unterstützen .
2) verwende float Daran habe ich nicht gedacht. Überprüfen Sie @ hensers Antwort dafür. Scheint, ziemlich gut zu arbeiten, obwohl ich den Eindruck hatte, dass das rechte Col zusammenbrechen würde, wenn nicht genug Platz für seinen Inhalt zur Verfügung steht. Anscheinend lag ich falsch - das scheint die beste Methode zu sein, wenn Sie ältere Browser unterstützen wollen.
3) Verwenden Sie flexbox Das ist ein bisschen mehr Arbeit und vielleicht kompliziert, aber ich kann diesen großartigen Leitfaden empfehlen fange mit der flexbox an. Das schließt natürlich alte IE-Versionen aus .
4) Verwenden Sie Tabellen Hässlich, nicht wirklich empfehlenswert, aber es unterstützt alle Browser.
5) Javascript Sie können JavaScript verwenden, um den verbleibenden Speicherplatz zu berechnen. Aber das muss natürlich auf die Größe angepasst werden. Nicht empfohlen, da es nicht so schnell ist wie die anderen Optionen.
%Vor%Tags und Links html css twitter-bootstrap-2