Wie erstelle ich mit Twitter Bootstrap ein fest fließendes 2-Spalten-Layout?

So implementieren Sie ein zweispaltiges Layout mit fester Flüssigkeit mit Twitter Bootstrap

Hintergrund

Erstellen eines zweispaltigen Layouts mit einer festen Breite Spalte und eine Spalte mit fließender Breite sind ein gängiges Entwurfsmuster. Frühere Versionen von Twitter Bootstrap erlaubten dies mithilfe der .container-fluid-Klasse, aber dies wird in Bootstrap 2.0 und höher nicht mehr unterstützt.

Lösung

Um dieses Problem zu beheben, können wir eine Kombination aus verwenden CSS und leicht modifizierter HTML-Code:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

.fixed {
    width: 150px;  /* Fixed width for fixed column */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width from .fixed class */
    overflow: hidden;
}

/* Content Height Equalization CSS (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Notizen

• Passen Sie die feste Breite an Ihre Wünsche an feste Spaltengröße.
• Um die Flüssigkeitsspalte auf der linken Seite anzuzeigen, ersetzen Sie im .filler-CSS rechts: 0 durch links: 0.
• Das zusätzliche CSS ist optional, stellt aber sicher, dass die feste und Flüssigkeitssäulen sind gleich hoch.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Twitter Bootstrap ein fest fließendes 2-Spalten-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!