Wie kann ich in Bootstrap 3 zweispaltige Layouts in voller Höhe erstellen?

Erzielen von zweispaltigen Layouts voller Höhe in Bootstrap 3

Bootstrap 3 bietet keine native Unterstützung für Spaltenlayouts voller Höhe. Durch den Einsatz von benutzerdefiniertem CSS und der Nutzung von CSS-Tabellen können wir diese Funktionalität jedoch replizieren.

Markup

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

Relevantes CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Erklärung

Dieser Code erreicht Spalten voller Höhe und ein Verhältnis von 1:3 (Navigation:Inhalt) für mittlere Bildschirmbreiten und mehr. Eine benutzerdefinierte CSS-Klasse (No-Float) wird verwendet, um das Schweben von Spalten zu verhindern und sicherzustellen, dass sie als Tabellenzellen angezeigt werden.

Überlegungen

• Die native Spalte von Bootstrap Klassen (col-md-3, col-md-9) werden für die Reaktionsfähigkeit verwendet.
• Für kleinere Bildschirme (unten mittel), kehren die Spalten zu ihrem Standard-Bootstrap-Verhalten zurück (jede Spalte belegt 100 % Breite).
• Wenn ein Verhältnis von 1:3 für alle Bildschirmbreiten erforderlich ist, können die Spaltenklassen von Bootstrap aus dem Markup entfernt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich in Bootstrap 3 zweispaltige Layouts in voller Höhe erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!