Блог

Мне нужно отключить адаптивный макет в Bootstrap, но я сталкиваюсь с некоторыми проблемами.

Я заменил мета-тег на:

 content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  

И заменил инициализацию сетки в контейнере на это:

 .container {
  .container-fixed();

  @media (min-width: 200px) {
    width: @container-lg;
  }

  @media (min-width: @screen-xs-min) {
    width: @container-lg;
  }

  @media (min-width: @screen-sm-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-md-min) {
    width: @container-lg;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

  // min-width: 980px !important;
}
  

Но я вижу некоторые ошибки в небольшом разрешении дисплея в моем коде:
http://www.playground.obuh.by/

Что я сделал не так?

Из документации Bootstrap по отключению отзывчивости

1. Опустите окно просмотра <meta> , упомянутое в документах CSS
2. Переопределите width на .container для каждого уровня сетки с одной шириной, например width: 970px !important; Убедитесь, что это происходит после стандартного Bootstrap CSS. При желании вы можете избежать !important с помощью медиа-запросов или какого-либо селектора-fu.
3. При использовании навигационных панелей удалите все поведение при сворачивании и расширении навигационной панели.
4. Для макетов сетки используйте .col-xs-* классы в дополнение к средним / большим классам или вместо них. Не волнуйтесь, сетка сверхмалых устройств масштабируется для всех разрешений.

В частности, обратите внимание на # 4. Если вы используете только col-xs , вы все равно можете использовать макет сетки, но не увидите изменений на разных размерах экрана.