Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich Spalten voller Höhe in Bootstrap 3 mit benutzerdefiniertem CSS?

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

DDD
DDDOriginal
2024-12-06 15:47:19460Durchsuche

How to Create Full-Height Columns in Bootstrap 3 using Custom 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn