Kann Twitter Bootstrap verwendet werden, um ein zweispaltiges Layout mit einer Seitenleiste mit fester Breite und einem Hauptinhaltsbereich mit fließender Breite zu erstellen?

Erstellen eines 2-Spalten-Layouts (fest – flüssig) mit Twitter Bootstrap

In diesem Artikel gehen wir näher darauf ein, ob dies machbar ist Erreichen Sie mit Twitter Bootstrap ein zweispaltiges Layout mit einer Seitenleiste mit fester Breite und einem Hauptinhaltsbereich mit fließender Breite. Wir bieten umfassende Erklärungen und Lösungen, die Sie bei Ihrer Entwicklung unterstützen.

Ist das mit Twitter Bootstrap möglich?

Twitter Bootstrap enthielt zunächst eine Option für ein festes, flüssiges Layout Klasse „.container-fluid“. Mit der Veröffentlichung von Version 2.0 wurde diese Funktion jedoch entfernt. Daher ist es nicht möglich, ein Fixed-Fluid-Layout ausschließlich mit den Standard-Bootstrap-Klassen zu implementieren.

Lösung

1. Fixed-Fluid-Layout

Wir können ein Fixed-Fluid-Layout mithilfe einer Kombination aus modifiziertem HTML und CSS implementieren:

HTML:

<div>

CSS:

.fixed {
    width: 150px;
    float: left;
}

.fixed + div {
     margin-left: 150px;
     overflow: hidden;
}

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;  
}

2. Gleiche Spaltenhöhen (optional)

Um gleiche Höhen für die Seitenleiste und den Inhaltsbereich zu erreichen:

HTML:

<div>

Hinweise:

• Um die Seitenleiste zum Füllelement zu machen, ändern Sie im CSS „rechts: 0“ in „links: 0“.

Das obige ist der detaillierte Inhalt vonKann Twitter Bootstrap verwendet werden, um ein zweispaltiges Layout mit einer Seitenleiste mit fester Breite und einem Hauptinhaltsbereich mit fließender Breite zu erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!