Wie können Sie in Twitter Bootstrap eine Seitenleiste mit fester Breite und einen Inhaltsbereich mit flüssiger Breite erreichen?

Implementieren eines Fixed-Fluid-Layouts mit Twitter Bootstrap

Trotz der Beliebtheit von Twitter Bootstrap wurden Bedenken hinsichtlich seiner Fähigkeit geäußert, eine Zwei zu erstellen -Spaltenlayout mit einem Seitenbereich mit fester Breite und einem Inhaltsbereich mit fließender Breite.

Mögliche Lösungen:

Originallösung (Bootstrap v1.0)

Durch die Verwendung einer Kombination aus modifiziertem HTML und CSS ist es möglich, in Bootstrap v1.0 ein fest fließendes Layout zu erreichen. Der aktualisierte Code lautet wie folgt:

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Removed spanX class -->
            ...
        </div>
    </div>
</div>

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

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

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

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

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

Aktualisierte Lösung (Bootstrap v2.0)

Die Entfernung der Klasse „.container-fluid“. in Twitter Bootstrap v2.0 machte die ursprüngliche Lösung inkompatibel. Leichte CSS-Änderungen ermöglichen jedoch die Implementierung eines zweispaltigen Fixed-Fluid-Layouts:

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

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

Sicherstellung der gleichen Höhe für Seitenleiste und Inhalt

Obwohl nicht notwendig ist es oft wünschenswert sicherzustellen, dass die Seitenleiste und die Inhaltsspalte die gleiche Höhe haben. Dies kann erreicht werden, indem man der Fluid-Width-Spalte eine „.filler“-Klasse hinzufügt und mit dem Pseudo-Selektor ::after ein Füllelement hinzufügt, das den verbleibenden Raum auszufüllen scheint.

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    left: 150px;  /* Match fixed width */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;  
}

Hinweise:

• Für ein Fluid-Fluid-Layout stellen Sie „.container-fluid“ auf eine Mindesthöhe von 100 % ein.
• Um das Füllelement zu haben Ändern Sie auf der linken Seite der Seite „left: 150px;“ zu „rechts: 0;“.

Das obige ist der detaillierte Inhalt vonWie können Sie in Twitter Bootstrap eine Seitenleiste mit fester Breite und einen Inhaltsbereich mit flüssiger Breite erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!