Модал Bootstrap (проблема совместимости с мобильными устройствами)

Question

Я использую модальный бутстрап (версия 2); По умолчанию размер не желательны, так что я применил следующий CSS:

#myModal{ 
    width: 80%; 
    margin-left: -40%; 
} 

Но проблема заключается содержание моего модальных не совместима с мобильными устройствами больше; Я имею в виду, что горизонтальной полосы прокрутки больше нет, и текст выходит из содержимого; однако, если я не применяю упомянутый CSS, он совместим с мобильными устройствами; но проблема в том, что она слишком мала для моих целей на рабочем столе.

Answer 1

Bootstrap - это использование медиапроцессов. Поскольку вас беспокоит только отображение на десктопах, вы также должны их использовать! Вы можете играть с минимальным значением ширины, но 789px является обычным для iPads.

@media (min-width: 789px) { 
      width:80%; 
      margin-left: -40%; 
     } 

Answer 2

Если вы не попали далеко на ваш сайт, и с помощью начальной загрузки 2, я бы посоветовал преобразовать все классы в макете жидкости. Это поможет вам при использовании медиа-запросов, как указано выше.

Если вы ДЕЙСТВИТЕЛЬНО на ранней стадии разработки, я бы предложил переключиться на bootstrap 3, поскольку он лучше подготовлен к реагированию на поведение.

В любом случае, bootstrap 2 имеет файл responsive.css, который имеет хороший набор медиа-запросов, чтобы вы могли двигаться.

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Мой совет будет проверить изменение размера вашего браузера, а также мобильные устройства, чтобы проверить ваш сайт держит вместе хорошо.