Wie erstelle ich mit Twitter Bootstrap ein Fixed-Fluid-Layout?

Erstellen eines 2-spaltigen Fixed-Fluid-Layouts mit Twitter Bootstrap

Einführung

Erstellen eines Ein Layout mit einer Spalte mit fester Breite neben einer Spalte mit fließender Breite ist eine häufige Anforderung für responsives Webdesign. Dieser Layoutstil ermöglicht eine feste Seitenleiste oder ein Navigationsfeld neben einem flexiblen Inhaltsbereich, der sich an unterschiedliche Bildschirmgrößen anpasst. Mit Twitter Bootstrap ist es möglich, dieses Layout zu erreichen.

Implementierung

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

.fixed {
  width: 150px;
  float: left;
}

.fixed + div {
  margin-left: 150px;  
  overflow: hidden;
}

.fill { 
  min-height: 100%;
  position: relative;
}

.filler::after {
  background-color:inherit;
  bottom: 0;
  content: "";
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
  z-index: -1;  
}

Erklärung

• Die Container-Fluid-Klasse erstellt ein Fluid-Layout, das das gesamte Ansichtsfenster ausfüllt.
• Die row-fluid-Klasse stellt sicher, dass untergeordnete Elemente die verfügbare Breite ausfüllen.
• Die .fixed-Klasse legt die Breite der Seitenleiste auf einen festen Wert fest (z. B. 150 Pixel).
• Der Rand links Die Eigenschaft des Geschwisterelements .fixed stellt sicher, dass der Inhaltsbereich nach der Seitenleiste beginnt.
• Die Füllklasse legt eine Mindesthöhe von 100 % für das Container-Fluid-Element fest und stellt so sicher, dass die Seitenleiste und der Inhaltsbereich die gleiche Höhe haben .
• Das vom Pseudoselektor ::after erstellte .filler-Element überlagert das .filler-Div und vermittelt die Illusion einer gleichen Höhe für beide Spalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Twitter Bootstrap ein Fixed-Fluid-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!