Как отключить отзывчивую функцию полностью из Twitter Bootstrap 3?

Как отключить отзывчивость в Bootstrap 3?

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

Twitter.com делает это. Если вы попытаетесь изменить размер, с пользовательским интерфейсом ничего не произойдет, пока мой сайт перепроектирует все элементы.

Пример того, как я хочу: enter image description here

В любом случае, как отключить реакцию? Вся помощь была оценена.

Также недавно прочитал, что в Bootstrap 2.0 вы просто удаляете респонссионный boostrap CSS, но в 3.0 его запекли в один файл css.

Спасибо.

Ответы

Ответ 1

EDIT: Мой код ниже был написан для v3.0.0RC2, но в версии 3.0.0 документы получили раздел, посвященный этому вопросу: http://getbootstrap.com/getting-started/#disable-responsive

Используйте классы col-xs-X, так как они являются постоянной процентной шириной. Тогда отзывчивость происходит от .container, используя max-width при разных размерах медиа. Вы можете определить свою собственную альтернативу .container и использовать все остальное, как обычно:

Скрипт для примера ниже: http://jsfiddle.net/xTePL/

HTML:

<!-- Don't use .container at all or you will have to
     override a lot of responsive styles. -->
<div class="container-non-responsive">
  <div class="row">
    <div class="col-xs-4">
      <h1>Welcome to Non-responsive Land</h1>
    </div>
    <div class="col-xs-8">
      <!-- More content, more content -->
    </div>
  </div>
</div>

CSS

.container-non-responsive {
  /* Margin/padding copied from Bootstrap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;

  /* Set width to your desired site width */
  width: 1170px;
}

Ответ 2

Вот что сработало для меня:

<meta name='viewport' content='width=1190'>

Я хотел немного отбросить содержимое своего контента, поэтому я также сделал

.container{
  width: 1150px !important;
}

Протестировано на iPad и iPhone.

Ответ 3

Мне нравится (принятое) решение @ssorallen. Это решение не отключает все функции отклика, как было задано.

@grid-float-breakpoint (по умолчанию на 768 пикселей) позволит вашему меню свернуть и устанавливает выравнивание меток формы на основе ширины экрана. Ширина ваших модалов и каруселей также зависит от этой настройки.

Для получения дополнительной информации см. http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

обновить проверьте ссылку ниже из @skelly. Обратите внимание, что это по-прежнему не меняет точку слияния с плавающей точкой, и это решение не уменьшает код. Дальнейшие версии TB3 будут разделить несколько файлов меньше. Это упростит сбор нечувствительной версии.

Ответ 4

Просто выполните поиск отключить все медиа-запросы и закомментируйте их в файле bootstrap.css. Это не займет больше нескольких минут.

Затем вам нужно установить фиксированную ширину в внешний div, который устанавливает содержимое вашей страницы. Это обычно .container в bootstrap или что-то вроде #wrapper также распространено. 960px или то, что когда-либо было правильным для вашего сайта.

Вам также нужно удалить или прокомментировать метатекст в вашем HTML-заголовке. Если нет ни одного, то это также прекрасно (хотя вам нужно будет добавить его, если хотите, чтобы он был отзывчивым). Это выглядит так: