Плануйте ширину колонок на сітці з 12 колонок.

Кожен доданий рядок лежить на сітці Bootstrap: дванадцяти рівних доріжках, які ділять його колонки. Макет на кшталт 1/3 + 2/3 дає одній колонці чотири доріжки, а іншій вісім. Використовуйте цю сторінку, щоб планувати ширину, яка сходиться, і щоб дати рядку другий макет для менших екранів. Як узагалі додати рядок, див. Додавання рядка.

Відео дає рядку з 4 колонок другий макет для планшетів, а потім звужує вікно.

Як частки стають доріжками

Доріжки рядка в сумі дають 12. Коли їх більше, зайві колонки переносяться на новий рядок. Використовуйте частки, які дають цілі доріжки: половини, третини, чверті, шості та дванадцяті. Частка на кшталт 1/5 не має відповідного класу Bootstrap.

Рядок усередині колонки ділить цю колонку на власні дванадцять доріжок. Див. Вкладення.

Надайте рядку інший макет на планшетах

Макет, який ви вибираєте для нового рядка, діє від 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 пікселів кожна колонка займає повну ширину.

Розміри екрана

Кожна панель у діалоговому вікні макета встановлює колонки для одного розміру екрана. Макет також діє для більших екранів, аж до наступного розміру з власною панеллю.

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.
• Макет для настільних комп’ютерів утратив колонки. Ви вибрали плитку з меншою кількістю колонок для іншого розміру екрана, і конструктор скоротив макети рівної ширини відповідно. Скасуйте зміну, як показує сторінка Скасування та повторення, і використайте Custom Layout з однією часткою на колонку.
• Остання колонка падає на новий рядок. Частки в сумі дають більше за один рядок із 12 доріжок. Зробіть їх суму 1, наприклад 1/4 + 3/4.
• Власна колонка не має чіткої ширини. Її частка, наприклад 1/5, не має класу Bootstrap. Використовуйте половини, третини, чверті, шості або дванадцяті.

Що далі?

• Додавання рядка: додавайте рядки й вибирайте пресет колонок.
• Адаптивний дизайн: показуйте або ховайте елементи на телефонах, планшетах чи настільних комп’ютерах.
• Вкладення: розміщуйте рядки всередині колонок для точніших макетів.