Plan kolombreedtes op de grid met 12 kolommen.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Elke rij die je toevoegt staat op de Bootstrap-grid: twaalf gelijke tracks die zijn kolommen delen. Een lay-out zoals 1/3 + 2/3 geeft één kolom vier tracks en de andere acht. Gebruik deze pagina om breedtes te plannen die optellen, en om een rij een tweede lay-out voor kleinere schermen te geven. Om überhaupt een rij toe te voegen, zie Een rij toevoegen.

De video geeft een rij van 4 kolommen een tweede lay-out voor tablets en versmalt daarna het venster.

Hoe breuken tracks worden

Breuk Tracks Typisch gebruik
1/1 12 Eén kolom over de volle breedte
1/2 6 Twee gelijke kolommen
1/3 4 Drie gelijke kolommen, of een sidebar naast 2/3
2/3 8 Hoofdinhoud naast een 1/3-sidebar
1/4 3 Vier gelijke kolommen, of een sidebar naast 3/4
3/4 9 Hoofdinhoud naast een 1/4-sidebar
1/6 2 Zes kleine kolommen, zoals een rij logo's
5/12 and 7/12 5 and 7 Twee kolommen van bijna gelijke breedte

De tracks van een rij tellen op tot 12. Wanneer ze tot meer optellen, wrappen de extra kolommen naar een nieuwe regel. Gebruik breuken die uitkomen op hele tracks: helften, derden, kwarten, zesden en twaalfden. Een breuk zoals 1/5 heeft geen bijpassende Bootstrap-klasse.

Een rij in een kolom splitst die kolom in zijn eigen twaalf tracks. Zie Nesten.

Geef een rij een andere lay-out op tablets

De lay-out die je voor een nieuwe rij kiest geldt vanaf Medium devices (≥ 768px) omhoog. Onder die breedte stapelen kolommen. Deze stappen houden vier kolommen op desktops en tonen twee per regel op tablets.

  1. Wijs de rij aan en klik op het gridpictogram in zijn besturingsbalk. Het lay-outdialoogvenster opent op het paneel Medium devices (≥ 768px).
  2. Kies de tegel met vier gelijke kolommen.
  3. Klik op Add screen size. Een tweede paneel opent met een kopie van de lay-out.
  4. Kies in de schermgroottelijst van het nieuwe paneel Small devices (≥ 576px).
  5. Klik op Custom Layout, typ 1/2 + 1/2 + 1/2 + 1/2 en klik op Save.
  6. Klik op de werkbalk op Save.

Vier helften houden alle vier kolommen en zetten twee op elke regel. Een tegel met twee kolommen zou de rij in plaats daarvan tot twee kolommen terugbrengen.

Het dialoogvenster Rijlay-out met Medium devices boven en Small devices (576px en hoger) open, met zijn knop Custom Layout (1/2 + 1/2 + 1/2 + 1/2) gemarkeerd, naast de vier kolommen Plan, Design, Build en Grow

Wat je ziet

Op een breed scherm toont de rij vier kolommen naast elkaar. Maak het browservenster smaller dan 768 pixels en ze wrappen naar twee per regel. Onder 576 pixels neemt elke kolom de volle breedte.

Schermgroottes

Elk paneel in het lay-outdialoogvenster stelt de kolommen in voor één schermgrootte. De lay-out geldt ook voor grotere schermen, tot de volgende grootte met een eigen paneel.

Paneel Geldt vanaf
Extra small (< 576px) De kleinste telefoons omhoog
Small devices (≥ 576px) 576 pixels
Medium devices (≥ 768px) 768 pixels; het eerste paneel van een nieuwe rij
Large devices (≥ 992px) 992 pixels
Extra large (≥ 1200px) 1200 pixels
Extra extra large (≥ 1400px) 1400 pixels

Remove screen size verwijdert een paneel en zijn lay-out. Custom Layout neemt elke lijst met breuken aan, zoals 1/4 + 1/2 + 1/4. Wanneer de lay-out van een paneel niet een van de tegels is, markeert het dialoogvenster Custom Layout en noemt het de lay-out erop, zoals Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Klik erop om die lay-out te bewerken in het vak voor aangepaste lay-out.

Bootstrap op je site

De grid heeft Bootstrap 5 op de pagina nodig. Een sitebeheerder kiest waar die vandaan komt in DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), onder Bootstrap. Sideload Bootstrap files biedt Bootstrap 5, die de builder zelf laadt, of None (theme provides Bootstrap).

Als je de lay-out niet ziet

  • Kolommen stapelen op elke schermgrootte. Er is geen Bootstrap geladen: de instelling is None (theme provides Bootstrap) en het thema laadt hem niet. Kies Bootstrap 5 onder Sideload Bootstrap files op /admin/dxpr_studio/dxpr_builder/settings.
  • De desktoplay-out verloor kolommen. Je koos een tegel met minder kolommen voor een andere schermgrootte en de builder bracht de lay-outs met gelijke breedte terug om te matchen. Draai de wijziging terug, zoals Ongedaan maken en opnieuw toont, en gebruik Custom Layout met één breuk per kolom.
  • De laatste kolom valt naar een nieuwe regel. De breuken tellen op tot meer dan één rij van 12 tracks. Laat ze optellen tot 1, zoals 1/4 + 3/4.
  • Een aangepaste kolom heeft geen duidelijke breedte. Zijn breuk, zoals 1/5, heeft geen Bootstrap-klasse. Gebruik helften, derden, kwarten, zesden of twaalfden.

Wat nu?