Wie erstelle ich Spalten voller Höhe in Bootstrap 3 mit benutzerdefiniertem CSS?

Bootstrap 3 Spalten voller Höhe: Eine benutzerdefinierte CSS-Lösung

Einführung:

Erstellen Layouts in voller Höhe mit Twitter Bootstrap 3 können eine Herausforderung sein. Obwohl die nativen Klassen von Bootstrap diese Funktion nicht unterstützen, ist es möglich, diesen Effekt mit benutzerdefiniertem CSS zu erzielen.

Benutzerdefinierter CSS-Ansatz:

1. Einstellung 100 % Höhe:
   Stellen Sie die Höhe der Körper-, Container- und Zeilenelemente auf 100 % ein, um sicherzustellen, dass sie sich über die gesamte Höhe erstrecken Höhe des Ansichtsfensters.
2. Anzeige als Tabelle:
   Konvertieren Sie das Containerelement mit display:table in eine Tabelle. Dadurch kann der Inhalt des Containers in einer tabellarischen Struktur angeordnet werden.
3. Floating Cell:
   Fügen Sie der Navigationsspalte eine benutzerdefinierte Klasse, z. B. No-Float, hinzu. Stellen Sie diese Klasse so ein, dass sie display: table-cell und float: none hat. Dadurch wird verhindert, dass die Navigationsspalte schwebt, und sie kann vertikal an der Inhaltsspalte ausgerichtet werden.

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>

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Vorteile und Überlegungen:

• Diese benutzerdefinierte CSS-Lösung bietet ein Layout in voller Höhe, das mit Bootstrap 3 kompatibel ist.
• Das Verhältnis von Navigation zu Inhalt von 1:3 kann angepasst werden Ändern der Spaltenbreiten im CSS.
• Es ist jedoch wichtig, die benutzerdefinierte Klasse (z. B. No-Float) zu verwenden, anstatt sie zu ändern Bootstraps native Spaltenklassen zur Vermeidung von Konflikten.

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