--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/bootstrap-raster' title: 'Spaltenbreiten im 12er-Raster planen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:02:01+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Spaltenbreiten im 12er-Raster planen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:02:01+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/bootstrap-raster' articleSection: Design-Leitfäden - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/design/bootstrap-raster' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Elemente gestalten](/de/hc/documentation/learn-dxpr-builder/element-settings) /[Design-Leitfäden](/de/hc/documentation/learn-dxpr-builder/design/overview) # Spaltenbreiten im 12er-Raster planen. DXPR Builder lernenSeiten erstellenElemente gestaltenDesign-Leitfäden ## In diesem Leitfaden Verwandte Leitfäden - [Eine Zeile hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten) - [Layout auf Telefonen lauffähig machen](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design) - [KI-Texte prüfen und übernehmen](/de/hc/documentation/learn-dxpr-builder/layout/nesting) 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](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten). 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](/de/hc/documentation/learn-dxpr-builder/layout/nesting). ## 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. ## 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](/de/hc/dokumentation/dxpr-builder-lernen/bearbeiten/rueckgaengig-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? - [Zeile hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/zeilen-und-spalten): Zeilen hinzufügen und Spaltenvoreinstellung wählen. - [Responsives Design](/de/hc/dokumentation/dxpr-builder-lernen/design/responsives-design): Elemente auf Telefonen, Tablets oder Desktops zeigen oder verbergen. - [Verschachteln](/de/hc/documentation/learn-dxpr-builder/layout/nesting): Zeilen in Spalten legen für feinere Layouts.