--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%96%D1%82%D0%BA%D0%B0-bootstrap' title: 'Плануйте ширину колонок на сітці з 12 колонок | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T20:07:26+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Кожен доданий рядок лежить на сітці Bootstrap: дванадцяти рівних доріжках, які ділять його колонки. Макет на кшталт 1/3 + 2/3 дає одній колонці чотири доріжки, а іншій вісім. Використовуйте цю сторінку, щоб планувати ширину, яка сходиться, і щоб дати рядку другий макет для менших екранів. Як узагалі додати рядок, див.' 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-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Плануйте ширину колонок на сітці з 12 колонок' description: 'Кожен доданий рядок лежить на сітці Bootstrap: дванадцяти рівних доріжках, які ділять його колонки. Макет на кшталт 1/3 + 2/3 дає одній колонці чотири доріжки, а іншій вісім. Використовуйте цю сторінку, щоб планувати ширину, яка сходиться, і щоб дати рядку другий макет для менших екранів. Як узагалі додати рядок, див.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T20:07:26+0000' dateModified: '2026-10-24T20:08:10+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%96%D1%82%D0%BA%D0%B0-bootstrap' articleSection: 'Посібники з дизайну' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%96%D1%82%D0%BA%D0%B0-bootstrap' description: 'Кожен доданий рядок лежить на сітці Bootstrap: дванадцяти рівних доріжках, які ділять його колонки. Макет на кшталт 1/3 + 2/3 дає одній колонці чотири доріжки, а іншій вісім. Використовуйте цю сторінку, щоб планувати ширину, яка сходиться, і щоб дати рядку другий макет для менших екранів. Як узагалі додати рядок, див.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/overview) # Плануйте ширину колонок на сітці з 12 колонок. Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну ## In this guide Related guides - [Додавання рядка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96) - [Змусьте свій макет працювати на телефонах](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD) - [Додавання вкладеного макета](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F) Кожен доданий рядок лежить на сітці Bootstrap: дванадцяти рівних доріжках, які ділять його колонки. Макет на кшталт 1/3 + 2/3 дає одній колонці чотири доріжки, а іншій вісім. Використовуйте цю сторінку, щоб планувати ширину, яка сходиться, і щоб дати рядку другий макет для менших екранів. Як узагалі додати рядок, див. [Додавання рядка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96). Відео дає рядку з 4 колонок другий макет для планшетів, а потім звужує вікно. ## Як частки стають доріжками | Частка | Доріжки | Типове застосування | |---|---|---| | 1/1 | 12 | Одна колонка на повну ширину | | 1/2 | 6 | Дві рівні колонки | | 1/3 | 4 | Три рівні колонки або бічна панель поруч із 2/3 | | 2/3 | 8 | Основний вміст поруч із бічною панеллю 1/3 | | 1/4 | 3 | Чотири рівні колонки або бічна панель поруч із 3/4 | | 3/4 | 9 | Основний вміст поруч із бічною панеллю 1/4 | | 1/6 | 2 | Шість малих колонок, наприклад рядок логотипів | | 5/12 і 7/12 | 5 і 7 | Дві колонки майже рівної ширини | Доріжки рядка в сумі дають 12. Коли їх більше, зайві колонки переносяться на новий рядок. Використовуйте частки, які дають цілі доріжки: половини, третини, чверті, шості та дванадцяті. Частка на кшталт 1/5 не має відповідного класу Bootstrap. Рядок усередині колонки ділить цю колонку на власні дванадцять доріжок. Див. [Вкладення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F). ## Надайте рядку інший макет на планшетах Макет, який ви вибираєте для нового рядка, діє від **Medium devices (≥ 768px)** і вгору. Нижче цієї ширини колонки складаються. Ці кроки зберігають чотири колонки на настільних комп’ютерах і показують дві на рядок на планшетах. 1. Наведіть курсор на рядок і натисніть піктограму сітки на його панелі керування. Діалогове вікно макета відкриється на панелі **Medium devices (≥ 768px)**. 2. Виберіть плитку з чотирма рівними колонками. 3. Натисніть **Add screen size**. Відкриється друга панель із копією макета. 4. У списку розмірів екрана нової панелі виберіть **Small devices (≥ 576px)**. 5. Натисніть **Custom Layout**, введіть `1/2 + 1/2 + 1/2 + 1/2` і натисніть **Save**. 6. Натисніть **Save** на панелі інструментів. Чотири половини зберігають усі чотири колонки й ставлять дві на кожен рядок. Натомість плитка з двома колонками скоротила б рядок до двох колонок. ## Що ви бачите На широкому екрані рядок показує чотири колонки поруч. Зробіть вікно браузера вужчим за 768 пікселів, і вони перенесуться по дві на рядок. Нижче 576 пікселів кожна колонка займає повну ширину. ## Розміри екрана Кожна панель у діалоговому вікні макета встановлює колонки для одного розміру екрана. Макет також діє для більших екранів, аж до наступного розміру з власною панеллю. | Панель | Діє від | |---|---| | **Extra small (< 576px)** | Найменші телефони й більше | | **Small devices (≥ 576px)** | 576 пікселів | | **Medium devices (≥ 768px)** | 768 пікселів; перша панель нового рядка | | **Large devices (≥ 992px)** | 992 пікселі | | **Extra large (≥ 1200px)** | 1 200 пікселів | | **Extra extra large (≥ 1400px)** | 1 400 пікселів | **Remove screen size** видаляє панель та її макет. **Custom Layout** приймає будь-який список часток, наприклад `1/4 + 1/2 + 1/4`. Коли макет панелі не є однією з плиток, діалогове вікно позначає **Custom Layout** і називає на ньому макет, наприклад **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**. Натисніть його, щоб редагувати цей макет у полі власного макета. ## Bootstrap на вашому сайті Сітка потребує Bootstrap 5 на сторінці. Адміністратор сайту вибирає, звідки він береться, у **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`), у розділі **Bootstrap**. **Sideload Bootstrap files** пропонує **Bootstrap 5**, який конструктор завантажує сам, або **None (theme provides Bootstrap)**. ## Якщо ви не бачите макета - **Колонки складаються на кожному розмірі екрана.** Bootstrap не завантажено: налаштування має значення **None (theme provides Bootstrap)**, а тема його не завантажує. Виберіть **Bootstrap 5** у **Sideload Bootstrap files** за шляхом `/admin/dxpr_studio/dxpr_builder/settings`. - **Макет для настільних комп’ютерів утратив колонки.** Ви вибрали плитку з меншою кількістю колонок для іншого розміру екрана, і конструктор скоротив макети рівної ширини відповідно. Скасуйте зміну, як показує сторінка [Скасування та повторення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%81%D0%BA%D0%B0%D1%81%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D1%82%D0%B0-%D0%BF%D0%BE%D0%B2%D1%82%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F), і використайте **Custom Layout** з однією часткою на колонку. - **Остання колонка падає на новий рядок.** Частки в сумі дають більше за один рядок із 12 доріжок. Зробіть їх суму 1, наприклад `1/4 + 3/4`. - **Власна колонка не має чіткої ширини.** Її частка, наприклад 1/5, не має класу Bootstrap. Використовуйте половини, третини, чверті, шості або дванадцяті. ## Що далі? - [Додавання рядка](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96): додавайте рядки й вибирайте пресет колонок. - [Адаптивний дизайн](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD): показуйте або ховайте елементи на телефонах, планшетах чи настільних комп’ютерах. - [Вкладення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F): розміщуйте рядки всередині колонок для точніших макетів.