Змініть розмір модального елемента на додавання класу .modal-sm для малих модалів (максимальна ширина 300 пікселів), класу .modal-lg для великих модалів (максимальна ширина 800 пікселів) або .modal-xl для дуже великих модалів (максимальна ширина 1140 пікселів). За замовчуванням максимальна ширина становить 500 пікселів.
Існує чотири модальних розміри: дуже малий, малий, середній і великий. Кожен модальний розмір має адаптивну ширину, яка змінюється залежно від розміру браузера. Коли браузер зменшується, відсоток модальної ширини збільшується, таким чином зберігаючи правильне співвідношення між модальним і браузером.
Модальні розміри Модали мають три додаткові розміри, доступні через prop size. Ці розміри починаються в певних точках розриву, щоб уникнути горизонтальних смуг прокручування на вужчих вікнах перегляду. Дійсні додаткові розміри sm, lg і xl . Опис size відображає розмір у класах .modal-<size>.
Поки Bootstrap використовує em s або rems для визначення більшості розмірів, pxs використовуються для точок розриву сітки та ширини контейнера. Це пояснюється тим, що ширина вікна перегляду вказана в пікселях і не змінюється разом із розміром шрифту. Подивіться, як аспекти сіткової системи Bootstrap працюють на кількох пристроях за допомогою зручної таблиці.
Модальні розміри На робочому столі максимальна ширина великих модалів становить 568 пікселів, а малих — 368 пікселів. Ці ширини вирівнюються з сіткою робочого столу. На мобільних веб-екранах завжди мають бути модальні 100% ширини екрана (375 пікселів для стандартних розмірів iphone).
Додаткові розміри
| Розмір | Клас | Модальна максимальна ширина |
|---|---|---|
| Маленький | .modal-sm | 300 пікселів |
| За замовчуванням | Жодного | 500 пікселів |
| Великий | .modal-lg | 800 пікселів |
| Дуже великий | .modal-xl | 1140 пікселів |