Wie erreicht man in Bootstrap 3 zweispaltige Layouts in voller Höhe?

Bootstrap 3 Two Columns Full Height Optimization

In Bootstrap 3 kann das Erstellen eines Layouts voller Höhe mit zwei Spalten eine Herausforderung sein. Die nativen Klassen unterstützen dies nicht standardmäßig. Wir können es jedoch mit benutzerdefiniertem CSS implementieren.

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;
    box-sizing: border-box;
}

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

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

Dieses CSS nutzt CSS-Tabellen, um Spalten voller Höhe zu erstellen. Die Klasse „.no-float“ verhindert das Kollabieren von Spalten aufgrund des Float-basierten Layouts von Bootstrap.

Zusätzliche Überlegungen:

• Um ein 1:3 beizubehalten Verhältnis für mittlere Bildschirmbreiten und höher, verwenden Sie „.col-md-3“ und „.col-md-9“. Klassen.
• Wenn dieses Verhältnis für alle Bildschirmbreiten erforderlich ist, sollten Sie erwägen, die Bootstrap-Spaltenklassen zu entfernen, um eine unsachgemäße Verwendung zu vermeiden.
• Kleinere Bildschirme verwenden standardmäßig das normale Bootstrap-Spaltenverhalten, wobei jede Spalte den vollen Wert annimmt Breite.

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