--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/siatka-bootstrap' title: 'Planuj szerokości kolumn w siatce 12-kolumnowej | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:48+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. 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: 'Planuj szerokości kolumn w siatce 12-kolumnowej' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:48+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/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/siatka-bootstrap' articleSection: 'Przewodniki projektowe' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/siatka-bootstrap' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) /[Przewodniki projektowe](/pl/hc/documentation/learn-dxpr-builder/design/overview) # Planuj szerokości kolumn w siatce 12-kolumnowej. Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe ## W tym przewodniku Powiązane przewodniki - [Dodawanie wiersza.](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/wiersze-i-kolumny) - [Działanie układu na telefonach](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/projekt-responsywny) - [Dodawanie układu zagnieżdżonego.](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-zagniezdzony) 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](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/wiersze-i-kolumny). 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](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-zagniezdzony). ## 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. ## 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](/pl/hc/dokumentacja/nauka-dxpr-builder/edycja/cofnij-i-ponow), 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? - [Dodawanie wiersza](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/wiersze-i-kolumny): dodawaj wiersze i wybieraj preset kolumn. - [Projekt responsywny](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/projekt-responsywny): pokazuj albo ukrywaj elementy na telefonach, tabletach i desktopach. - [Zagnieżdżanie](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-zagniezdzony): umieszczaj wiersze wewnątrz kolumn dla drobniejszych układów.