Planuj szerokości kolumn w siatce 12-kolumnowej.

Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe

Każdy dodany wiersz opiera się na siatce Bootstrapa: dwunastu równych torach współdzielonych przez jego kolumny. Układ taki jak 1/3 + 2/3 daje jednej kolumnie cztery tory, a drugiej osiem. Użyj tej strony, aby planować szerokości sumujące się do całości i nadać wierszowi drugi układ dla mniejszych ekranów. Aby w ogóle dodać wiersz, zobacz dodawanie wiersza.

Film nadaje wierszowi 4 kolumn drugi układ dla tabletów, potem zwęża okno.

Jak ułamki stają się torami

Ułamek Tory Typowe zastosowanie
1/1 12 Jedna kolumna na pełną szerokość
1/2 6 Dwie równe kolumny
1/3 4 Trzy równe kolumny albo pasek boczny obok 2/3
2/3 8 Główna treść obok paska bocznego 1/3
1/4 3 Cztery równe kolumny albo pasek boczny obok 3/4
3/4 9 Główna treść obok paska bocznego 1/4
1/6 2 Sześć małych kolumn, na przykład wiersz logo
5/12 i 7/12 5 i 7 Dwie kolumny o prawie równej szerokości

Tory wiersza sumują się do 12. Gdy sumują się do więcej, nadmiarowe kolumny zawijają się do nowego wiersza. Używaj ułamków dających całe tory: połówek, trzecich, ćwiartek, szóstych i dwunastych. Ułamek taki jak 1/5 nie ma pasującej klasy Bootstrapa.

Wiersz wewnątrz kolumny dzieli tę kolumnę na własne dwanaście torów. Zobacz zagnieżdżanie.

Nadanie wierszowi innego układu na tabletach

Układ wybrany dla nowego wiersza obowiązuje od Medium devices (≥ 768px) w górę. Poniżej tej szerokości kolumny układają się w stos. Te kroki zachowują cztery kolumny na desktopach i pokazują dwie w wierszu na tabletach.

  1. Najedź na wiersz i kliknij ikonę siatki na jego pasku narzędzi. Otworzy się okno układu na panelu Medium devices (≥ 768px).
  2. Wybierz kafelek z czterema równymi kolumnami.
  3. Kliknij Add screen size. Otworzy się drugi panel z kopią układu.
  4. Na liście rozmiarów ekranu nowego panelu wybierz Small devices (≥ 576px).
  5. Kliknij Custom Layout, wpisz 1/2 + 1/2 + 1/2 + 1/2 i kliknij Save.
  6. Kliknij Save na pasku narzędzi.

Cztery połówki zachowują wszystkie cztery kolumny i kładą dwie w każdym wierszu. Kafelek z dwiema kolumnami zmniejszyłby zamiast tego wiersz do dwóch kolumn.

Okno układu wiersza z Medium devices na górze i otwartym Small devices (576px i więcej), z zaznaczonym przyciskiem Custom Layout (1/2 + 1/2 + 1/2 + 1/2), obok czterech kolumn Plan, Design, Build i Grow

Co widzisz

Na szerokim ekranie wiersz pokazuje cztery kolumny obok siebie. Zwęź okno przeglądarki poniżej 768 pikseli, a zawiną się do dwóch w wierszu. Poniżej 576 pikseli każda kolumna zajmuje pełną szerokość.

Rozmiary ekranu

Każdy panel w oknie układu ustawia kolumny dla jednego rozmiaru ekranu. Układ obowiązuje też dla większych ekranów, do kolejnego rozmiaru z własnym panelem.

Panel Obowiązuje od
Extra small (< 576px) Od najmniejszych telefonów w górę
Small devices (≥ 576px) 576 pikseli
Medium devices (≥ 768px) 768 pikseli; pierwszy panel nowego wiersza
Large devices (≥ 992px) 992 pikseli
Extra large (≥ 1200px) 1200 pikseli
Extra extra large (≥ 1400px) 1400 pikseli

Remove screen size usuwa panel i jego układ. Custom Layout przyjmuje dowolną listę ułamków, na przykład 1/4 + 1/2 + 1/4. Gdy układ panelu nie jest jednym z kafelków, okno oznacza Custom Layout i nazywa na nim układ, na przykład Custom Layout (1/2 + 1/2 + 1/2 + 1/2). Kliknij go, aby edytować ten układ w polu układu własnego.

Bootstrap w twojej witrynie

Siatka potrzebuje Bootstrap 5 na stronie. Administrator witryny wybiera jego źródło w DXPR Studio > DXPR Builder > General Settings (/admin/dxpr_studio/dxpr_builder/settings), w Bootstrap. Sideload Bootstrap files oferuje Bootstrap 5, który kreator wczytuje sam, albo None (theme provides Bootstrap).

Jeśli nie widzisz układu

  • Kolumny układają się w stos w każdym rozmiarze ekranu. Nie wczytano Bootstrapa: ustawienie to None (theme provides Bootstrap), a motyw go nie wczytuje. Wybierz Bootstrap 5 w Sideload Bootstrap files w /admin/dxpr_studio/dxpr_builder/settings.
  • Układ desktopu stracił kolumny. Wybrano kafelek z mniejszą liczbą kolumn dla innego rozmiaru ekranu, a kreator zredukował układy o równej szerokości do dopasowania. Cofnij zmianę, jak pokazują cofanie i ponawianie, i użyj Custom Layout z jednym ułamkiem na kolumnę.
  • Ostatnia kolumna spada do nowego wiersza. Ułamki sumują się do więcej niż jednego wiersza 12 torów. Doprowadź je do sumy 1, na przykład 1/4 + 3/4.
  • Własna kolumna nie ma jasnej szerokości. Jej ułamek, na przykład 1/5, nie ma klasy Bootstrapa. Użyj połówek, trzecich, ćwiartek, szóstych albo dwunastych.

Co dalej?