2-spaltig

Diese Webseite arbeitet mit einem 12-spaltigen Bootstrap-Framework.

Hier sehen Sie ein Beispiel für eine 2-spaltige responsive Ansicht. Die beiden Spalten stehen solange nebeneinander, bis die Breite des Browserfenster kleiner als 767 Pixel ist; anschließend fließen die beiden Container untereinander:

1. Spalte

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.

2.Spalte

Vorgehensweise:

Wechseln Sie in den Code-Editor und erstellen Sie zwei Div-Container mit je den Klassen "col-lg-6 col-md-6 col-sm-12 col-xs-12". Dies sieht entsprechend so aus:

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Inhalt</div> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Inhalt</div>

Ihre Inhalte tragen Sie zwischen dem öffnenden und schließenden Tag ein, dies können Sie wieder über den normalen HTML-Editor erledigen. Ersetzen Sie einfach "Inhalt" durch Ihre gewünschten Inhalte.

Erläuterung

"col-lg-12" = Beeinflusst die Darstellung ab einer Breite von mindestens 1200 Pixel - die Ziffer danach gibt an, wie viele Spalten das Element einnehmen soll.

"col-md-12" = Beeinflusst die Darstellung ab einer Breite von mindestens 992 Pixel und höchstens 1199 Pixel - die Ziffer danach gibt an, wie viele Spalten das Element einnehmen soll.

"col-sm-12" = Beeinflusst die Darstellung ab einer Breite von mindestens 768 Pixel und höchstens 991 Pixel - die Ziffer danach gibt an, wie viele Spalten das Element einnehmen soll.

"col-xs-12" = Beeinflusst die Darstellung ab einer Breite von kleiner als 767 Pixel - die Ziffer danach gibt an, wie viele Spalten das Element einnehmen soll.

Beachten Sie bitte, dass Sie maximal 12 Spalten erstellen!