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 des erstrecken viewport.
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

    

        
Navigation
        
Content
    

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.
• Die Das Verhältnis von Navigation zu Inhalt im Verhältnis 1:3 kann durch Ändern der Spaltenbreiten im CSS angepasst werden.
• Es ist jedoch wichtig, dies zu tun Verwenden Sie die benutzerdefinierte Klasse (z. B. No-Float), anstatt die nativen Spaltenklassen von Bootstrap zu ändern, um Konflikte zu vermeiden.