3-spaltiges Layout

3-spaltiges Layout zum Ausprobieren und Weiterverwenden

Nach Vorstellung des Standard-Layouts mit 2 Spalten, kann man mit Bootstrap auch komplexe Layouts schnell gestalten.

Als Beispiel wird ein 3-spaltiges Layout inklusive Header und Footer definiert.

Der Header und Footer nutzen jeweils die komplette Layoutbreite (.col-md-12).

Der Inhaltsbereich gliedert sich  in drei Spalten:

  • linke Sidebar (.col-md-3)
  • Inhalt in der Mitte (.col-md-6)
  • rechte Sidebar (.col-md-3)

Der Inhalt nutzt also genau die halbe Breite des Layouts. Der Rest wird durch die Sidebars ausgefüllt.

Header, Inhaltsbereit und Footer kommen jeweils in eine separate Rasterreihe (.row)

Frage stellen
Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "3-spaltiges Layout..."

Duran fragt

Hallo, warum geht der Header über 12 Spalten und der Footer nur über 9 Spalten, wie es in der Erklärung geschrieben steht ? Im Html-Code haben beide die class col-md-12, müssten also beide über 12 Spalten gehen oder liege ich da falsch ?

Antwort von BootstrapWorld.de

Hallo Duran,

vielen Dank für deine Frage.

Ich habe das Tutorial und den Quellcode noch einmal verbessert. Hier war es etwas unübersichtlich. Bitte schau dir noch einmal den aktuellen Quellcode an. Du hast natürlich Recht. Der Header und Footer geht jeweils über 12 Spalten.

Wenn ich dir sonst noch helfen kann, dann stelle einfach noch eine Frage :-).

Viele Grüße

Andreas

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK