Wie erstelle ich in Bootstrap 3 ein zweispaltiges Layout in voller Höhe?

Bootstrap 3-Layout mit voller Höhe und zwei Spalten

Problem:

Erstellen einer Zwei -Spaltenlayout mit voller Höhe in Bootstrap 3 stellt eine Herausforderung dar, da hierfür keine native Unterstützung vorhanden ist Layout.

Lösung:

Während Bootstrap 3-Klassen allein dies nicht erreichen können, können wir CSS verwenden, um eine benutzerdefinierte Spaltenlösung mit voller Höhe mithilfe von CSS zu implementieren Tabellen.

HTML:

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

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:

Diese Lösung nutzt CSS-Tabellen, um den Effekt voller Höhe zu erzielen. Das .container-Element ist auf display: table und das .row-Element auf display: table-row eingestellt. Die Spaltenelemente (.col-md-3 und .col-md-9) sind auf display: table-cell und float: none eingestellt, wodurch das standardmäßige Float-Verhalten entfernt wird.

Responsive Adjustments

Um ein reaktionsfähiges Verhalten sicherzustellen, können Sie das CSS für bestimmte Haltepunkte ändern. Sie könnten beispielsweise eine Medienabfrage verwenden, um die Tabellenanzeigeeigenschaften nur für mittlere Bildschirmbreiten und mehr anzuwenden.

Benutzerdefinierte Klasse:

Um die Änderung der nativen Bootstrap-Spalte zu vermeiden Klassen verwenden wir eine benutzerdefinierte Klasse (No-Float) im Markup und wenden nur die CSS-Tabellenstile darauf an Klasse.

Überlegungen:

• Das Verhältnis 1:3 ist im CSS fest codiert. Für andere Verhältnisse müssen Sie den Abstand anpassen.
• Entfernen Sie für Spalten voller Höhe auf allen Bildschirmgrößen die Bootstrap-Spaltenklassen aus dem Markup.

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