Ist es möglich, ein hybrides Fluid-/Nicht-Fluid-Gittersystem zu haben?

Question

Mit Bootstrap 2, was wäre die einfachste Methode, um eine Spaltenbreite links statisch und rechts fluid zu haben? Etwas ähnliches wie dies mit einer 200 px breiten linken Spalte und die rechte Spalte, die den Browserfenster ausfüllt.

======================
Hallo
======================
 A   |
 B   |      100%
200px|
 D   |
 E   |
 F   |

Ich habe versucht, einer regulären Container-Layout eine min-width hinzuzufügen, aber es zeigt ein seltsames Verhalten beim Verkleinern:

        Hallo

        Linke Spalte
        Rechte Spalte

Hier ist auch ein JSFiddle, obwohl das Quad-Layout von JSFiddle selbst sein eigenes Verhalten hinzufügt.

http://jsfiddle.net/BVmUL/882/

Answer 1

Kurze Antwort auf Ihre Frage ist NEIN. Bootstrap 2 verwendet Medienabfragen und prozentuale Maße, um ihre responsiven Rasterlayouts zu erreichen. Der Versuch, einen Hybridansatz mit Bootstrap 2 zu machen, ist völlig überflüssig.

Sie können diesen Ansatz ausprobieren. Verwenden Sie float:left; in der linken Spalte und geben Sie der rechten Spalte ein padding-left:200px; und das war's. Sie haben Ihr Layout gezeichnet. Fügen Sie unten clearfix hinzu, damit Sie später einen Footer verwenden können, wenn Sie möchten. Auf diese Weise behalten Sie die Unterstützung für die meisten Browser.

Überprüfen Sie JsFiddle Demo

HTML

        Hallo

        Links Links Links Links Links Links Links
        Rechts Rechts Rechts Rechts Rechts Rechts Rechts 

CSS

.header{
    background-color:#f00;
}
.left-col{
    background-color:#0f0;
    float:left;
    width:200px;
    height:400px;
}
.right-col{
    background-color:#00f;
    height:400px;
    padding-left:200px;
}

Nachdem können Sie Javascript verwenden, um die Breite der linken Spalte und das Padding der rechten Spalte dynamisch anzupassen, wenn das Fenster vergrößert oder verkleinert wird.

Sie möchten vielleicht auch die folgenden Alternativen in Betracht ziehen:

1. Calc() (nur IE9+)

Wenn Sie sich nicht um die Unterstützung von IE8- kümmern, ist dies der einfachste Weg, um dies zu erreichen. Sie können hier erfahren, wie es geht hier

2. Medienabfragen (nur IE9+)

Sie können Medienabfragen wie Bootstrap verwenden, aber Sie können keine prozentualen Maße verwenden, um das zu erreichen, was Sie suchen. Sie können es verwenden, um CSS-Eigenschaftswerte zu ändern und es responsiv zu machen (mit Ihren benutzerdefinierten Einschränkungen) auf diese Weise.

3. Flexbox (nur IE10+ (teilweise IE9))

Wird großartig sein, aber derzeit aufgrund der Browserunterstützung nicht empfohlen.

4. Tabellen

Schauen Sie sich diesen Thread an, um zu erfahren, warum Sie es nicht verwenden sollten.

Answer 2

Also möchten Sie im Grunde genommen, dass die rechte Spalte in den verfügbaren Platz passt.

Sie haben 5 Optionen, die nicht spezifisch für Bootstrap, sondern allgemein für HTML/CSS sind:

1) verwenden Sie calc

    .left-col {
        width: 200px;
    }
    .right-col {
        width: calc(100% - 200px);
    }

Dies schließt offensichtlich IE8 und andere Browser aus, die calc nicht unterstützen.

2) verwenden Sie float Das habe ich nicht bedacht. Überprüfen Sie @henser's Antwort dazu. Es scheint ziemlich gut zu funktionieren, obwohl ich der Meinung war, dass die right-col zerfallen würde, wenn nicht genügend verfügbarer Platz für ihren Inhalt vorhanden ist. Offensichtlich lag ich falsch - dies scheint die beste Methode zu sein, wenn Sie ältere Browser unterstützen möchten.

3) verwenden Sie flexbox Dies ist etwas mehr Arbeit und vielleicht komplizierter, aber ich kann diesen großartigen Leitfaden empfehlen, um mit Flexbox zu beginnen. Das schließt offensichtlich auch alte IE-Versionen aus.

4) verwenden Sie Tabellen Hässlich, nicht wirklich empfohlen, aber es unterstützt alle Browser.

5) Javascript Sie können JavaScript verwenden, um den verbleibenden Platz zu berechnen. Aber das muss natürlich bei der Größenänderung ausgeführt werden. Nicht zu empfehlen, da es nicht so schnell wie die anderen Optionen ist.

// jQuery Beispiel
$('.right-col').width($(window).width() - $('.left-col').width());