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

Bootstrap 3 Zwei Spalten in voller Höhe: Eine umfassende Anleitung

Einführung
Das Erreichen eines Spaltenlayouts in voller Höhe in Bootstrap 3 kann sein eine Herausforderung, da native Klassen diese Funktionalität nicht unterstützen. In diesem Artikel wird eine Lösung untersucht, die benutzerdefiniertes CSS verwendet, um Spalten voller Höhe mit einem Verhältnis von 1:3 zu erstellen und so den Bedarf an einem Layout zu erfüllen, bei dem sich beide Spalten über die gesamte Höhe des Ansichtsfensters erstrecken.

HTML-Markup
Die HTML-Struktur für dieses Layout besteht aus einer Kopfzeile, einem Container, einer Zeile und zwei Spalten.

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

CSS-Stile
Um die Spalten voller Höhe zu erreichen, integrieren wir benutzerdefiniertes CSS, das display:table; Eigenschaft, um eine CSS-Tabelle zu erstellen und sicherzustellen, dass beide Spalten die volle Höhe des Ansichtsfensters ausdehnen.

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

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

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

Erklärung
Die CSS-Stile definieren Folgendes:

• html, body und .container sind auf height: 100 % eingestellt; um sicherzustellen, dass der Inhalt das gesamte Ansichtsfenster ausfüllt.
• .container ist mit display: table; konfiguriert. um eine CSS-Tabelle zu erstellen.
• .row setzt die Anzeigeeigenschaft auf table-row, um eine Zeile innerhalb der CSS-Tabelle zu erstellen.
• .row .no-float setzt display:table-cell auf Sorgen Sie dafür, dass sich die Spalten wie Tabellenzellen innerhalb der Zeile verhalten.
• float: none überschreibt das Standard-Floating-Verhalten von Bootstrap für die Spalten.

Anpassung

• Bearbeiten Sie den margin-top-Wert auf .container, um den oberen Rand der Kopfzeile anzupassen.
• Ändern die Füllwerte auf .container, um den linken/rechten Abstand der Spalten festzulegen.
• Entfernen Sie die col-md-*-Klassen aus den Spalten, um ein festes Verhältnis von 1:3 über alle Bildschirmbreiten hinweg zu erstellen.

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