Spaltenbreiten im 12er-Raster planen.

DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden

Jede Zeile, die Sie hinzufügen, sitzt auf dem Bootstrap-Raster: zwölf gleiche Spuren, die sich ihre Spalten teilen. Ein Layout wie 1/3 + 2/3 gibt einer Spalte vier Spuren und der anderen acht. Nutzen Sie diese Seite, um Breiten zu planen, die aufgehen, und um einer Zeile ein zweites Layout für kleinere Bildschirme zu geben. Um überhaupt eine Zeile hinzuzufügen, siehe Zeile hinzufügen.

Das Video gibt einer Zeile aus 4 Spalten ein zweites Layout für Tablets und verengt dann das Fenster.

Wie aus Brüchen Spuren werden

Bruch Spuren Typische Nutzung
1/1 12 Eine volle Spalte
1/2 6 Zwei gleiche Spalten
1/3 4 Drei gleiche Spalten, oder Seitenleiste neben 2/3
2/3 8 Hauptinhalt neben 1/3-Seitenleiste
1/4 3 Vier gleiche Spalten, oder Seitenleiste neben 3/4
3/4 9 Hauptinhalt neben 1/4-Seitenleiste
1/6 2 Sechs kleine Spalten, etwa eine Logoreihe
5/12 und 7/12 5 und 7 Zwei fast gleich breite Spalten

Die Spuren einer Zeile ergeben 12. Wenn sie mehr ergeben, brechen die übrigen Spalten in eine neue Zeile um. Nutzen Sie Brüche, die als ganze Spuren aufgehen: Halbe, Drittel, Viertel, Sechstel und Zwölftel. Ein Bruch wie 1/5 hat keine passende Bootstrap-Klasse.

Eine Zeile in einer Spalte teilt diese Spalte in eigene zwölf Spuren. Siehe Verschachteln.

Zeile mit zweitem Layout auf Tablets

Das Layout, das Sie für eine neue Zeile wählen, gilt ab Medium devices (≥ 768px) aufwärts. Unter dieser Breite stapeln sich Spalten. Diese Schritte halten vier Spalten auf Desktops und zeigen zwei pro Zeile auf Tablets.

  1. Zeigen Sie auf die Zeile und klicken Sie auf das Rastersymbol in ihrer Steuerungsleiste. Der Layout-Dialog öffnet sich im Panel Medium devices (≥ 768px).
  2. Wählen Sie die Kachel mit vier gleichen Spalten.
  3. Klicken Sie auf Add screen size. Ein zweites Panel öffnet sich mit einer Kopie des Layouts.
  4. Wählen Sie in der Bildschirmgrößenliste des neuen Panels Small devices (≥ 576px).
  5. Klicken Sie auf Custom Layout, tippen Sie 1/2 + 1/2 + 1/2 + 1/2 und klicken Sie auf Save.
  6. Klicken Sie in der Symbolleiste auf Save.

Vier Halbe behalten alle vier Spalten und legen zwei pro Zeile. Eine Kachel mit zwei Spalten würde die Zeile stattdessen auf zwei Spalten reduzieren.

Der Zeilen-Layout-Dialog mit „Medium devices“ oben und geöffnetem „Small devices (576px and up)“, dessen Schaltfläche „Custom Layout (1/2 + 1/2 + 1/2 + 1/2)“ markiert ist, neben den vier Spalten Plan, Design, Build und Grow

Was Sie sehen

Auf breitem Bildschirm zeigt die Zeile vier Spalten nebeneinander. Machen Sie das Browserfenster schmaler als 768 Pixel und sie brechen zu zweit pro Zeile um. Unter 576 Pixeln nimmt jede Spalte die volle Breite.

Bildschirmgrößen

Jedes Panel im Layout-Dialog setzt die Spalten für eine Bildschirmgröße. Das Layout gilt auch für größere Bildschirme, bis zur nächsten Größe mit eigenem Panel.

Panel Gilt ab
Extra small (< 576px) Die kleinsten Telefone aufwärts
Small devices (≥ 576px) 576 Pixel
Medium devices (≥ 768px) 768 Pixel; das erste Panel einer neuen Zeile
Large devices (≥ 992px) 992 Pixel
Extra large (≥ 1200px) 1200 Pixel
Extra extra large (≥ 1400px) 1400 Pixel

Remove screen size löscht ein Panel und sein Layout. Custom Layout nimmt jede Bruchliste, etwa 1/4 + 1/2 + 1/4. Wenn das Layout eines Panels keine der Kacheln ist, markiert der Dialog Custom Layout und nennt das Layout darauf, etwa Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Klicken Sie darauf, um dieses Layout im Feld für eigenes Layout zu bearbeiten.

Bootstrap auf Ihrer Website

Das Raster braucht Bootstrap 5 auf der Seite. Die Administration der Website wählt die Herkunft unter DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), unter Bootstrap. Sideload Bootstrap files bietet Bootstrap 5, das der Builder selbst lädt, oder None (theme provides Bootstrap).

Wenn Sie das Layout nicht sehen

  • Spalten stapeln sich auf jeder Bildschirmgröße. Kein Bootstrap ist geladen: Die Einstellung ist None (theme provides Bootstrap) und das Theme lädt es nicht. Wählen Sie Bootstrap 5 unter Sideload Bootstrap files auf /admin/dxpr_studio/dxpr_builder/settings.
  • Das Desktop-Layout hat Spalten verloren. Sie haben eine Kachel mit weniger Spalten für eine andere Bildschirmgröße gewählt, und der Builder hat die gleichbreiten Layouts passend reduziert. Machen Sie die Änderung rückgängig, wie Rückgängig und Wiederholen zeigt, und nutzen Sie Custom Layout mit einem Bruch pro Spalte.
  • Die letzte Spalte fällt in eine neue Zeile. Die Brüche ergeben mehr als eine Zeile aus 12 Spuren. Lassen Sie sie 1 ergeben, etwa 1/4 + 3/4.
  • Eine eigene Spalte hat keine klare Breite. Ihr Bruch, etwa 1/5, hat keine Bootstrap-Klasse. Nutzen Sie Halbe, Drittel, Viertel, Sechstel oder Zwölftel.

Wie geht es weiter?