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


85

Начиная с Bootstrap 3 больше нет отдельных файлов для адаптивных и стандартных таблиц стилей. Итак, как я могу легко удалить отзывчивые функции?


1
В этом сообщении в блоге есть некоторая информация об этом и ссылка в конце на завершенную версию на Github.
bbill

1
Спросил @STLDeveloper 3 декабря 2012 г., 16:11. Bootstrap 3 исполнилось 2 дня или около того.
kanarifugl

1
@STLDeveloper, он говорит, что адаптивные файлы больше не разделены в Bootstrap 3 . Пост в блоге и аккаунт Bootstrap на Github объясняют изменения.
bbill

В документации по начальной загрузке описано, как это сделать: getbootstrap.com/getting-started/#disable-responsive
Николас Джанель,

@NicolasJanel твоя ссылка мертва.
Дмитрий

Ответы:


104

Чтобы отключить нерабочие стили, вам просто нужно изменить 4 строки кода в файле variables.less. Установите контрольные точки ширины экрана в файле variables.less следующим образом:

// Точки останова медиа-запросов
// ------------------------------------------------ -

// Очень маленький экран / телефон
// Примечание: использование @ screen-xs и @ screen-phone не рекомендуется в версии 3.0.1.
@ screen-xs: 1px;
@ экран-хз-мин: @ экран-хз;
@ экран-телефон: @ экран-xs-min;

// Маленький экран / планшет
// Примечание: использование @ screen-sm и @ screen-tablet не рекомендуется с версии 3.0.1.
@ screen-sm: 2 пикселя;
@ экран-см-мин: @ экран-см;
@ экран-планшет: @ экран-см-мин;

// Средний экран / рабочий стол
// Примечание: использование @ screen-md и @ screen-desktop не рекомендуется с версии v3.0.1
@ screen-md: 3 пикселя;
@ экран-мд-мин: @ экран-мд;
@ экран-рабочий стол: @ экран-мд-мин;

// Большой экран / широкий рабочий стол
// Примечание: использование @ screen-lg и @ screen-lg-desktop не рекомендуется, начиная с версии 3.0.1.
@ screen-lg: 9999 пикселей;
@ экран-LG-мин: @ экран-LG;
@ экран-LG-рабочий стол: @ экран-LG-мин;

Это устанавливает минимальную ширину в медиа-запросе в стиле рабочего стола ниже, чтобы она применялась ко всей ширине экрана. Спасибо 2calledchaos за улучшение! Некоторые базовые стили определены в мобильных стилях, поэтому мы должны обязательно их включить.

Изменить: Крис отмечает, что вы можете установить эти переменные в онлайн-компиляторе на сайте начальной загрузки.


7
Вы также можете остановить наложение панели навигации, изменив значение переменной @ grid-float-breakpoint на 1px.
Крис

8
вау, это работает также в онлайн-компиляторе на сайте загрузки пользовательских загрузок!
Крис

1
Я не уверен, что это работает. Если кто-то определяет @media (min-width: @screen-sm-min)(то есть применить этот стиль к точке останова sm и ко всем более высоким точкам останова; то есть sm, md, lg), вышеуказанные переопределения нарушат это предположение, поскольку определение больше не будет применяться к md? Я установил @ screen-xs на 1px и @ screen-sm также на 1px (в дополнение к тому, что @ screen-md был 1px); таким образом применяются все стили xs, sm и md, переопределяя себя с приоритетом исходного порядка.
Мартин Сучанек

1
Лучше использовать 1px для xs, 2px для sm, 3px для md и 9999px для lg. Таким образом, у вас не будет навигационных панелей и модальных окон в «мобильном режиме».
2called-chaos

1
работает, но горизонтальная полоса прокрутки в браузере все еще отсутствует
Cichy

45

Это объясняется в официальной документации по выпуску Bootstrap 3 :

Действия по отключению отзывчивых представлений

Чтобы отключить отзывчивые функции, выполните следующие действия. Посмотрите его в действии в модифицированном шаблоне ниже.

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

Вам по-прежнему понадобится Respond.js для IE8 (поскольку наши медиа-запросы все еще существуют, и их нужно подобрать). Это просто отключает "мобильный сайт" Bootstrap.

См. Также пример на GetBootstrap.com/examples/non-responsive/


5
У меня это не сработало. Некоторые элементы реагируют на ширину окна просмотра.
Ziyan Junaideen

@ZiyanJunaideen, ты наверное что-то упустил. Можете ли вы предоставить jsfiddle?
Адриан Би

1
Это сработало для меня. Думаю, это следует отметить как правильный ответ.
Дэйв Стюарт

20

В последнее время я просто понял, насколько легко сделать ваш bootstrap v3.1.1 невосприимчивым. Это включает в себя панели навигации, чтобы они не сворачивались. Не знаю, всем ли это известно, но я хотел бы этим поделиться.

Два шага к зависанию Bootsrap v3.1.1

Сначала создайте файл css, назовите его non-responseive.css. Не забудьте добавить его в свои темы или ссылку сразу после файлов начальной загрузки css.

Во-вторых, вставьте этот код в свой non-responseive.css:

/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}

Вот и все и наслаждайтесь .. ^^

Источник: non- responseive.css из примера на getbootstrap.com .


2
Ого, очень мило! Спасибо :)
Рональд Араужо

2
Пожалуйста, дайте ссылку на источник вашего кода, когда вы копируете / вставляете его сюда.
ba0708

11

Источник: http://getbootstrap.com/getting-started/#disable-responsive

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

11

Мне нужно было полностью удалить функцию реагирования Bootstrap, в итоге я переопределил поведение следующим фрагментом:

.container {
    width: 960px !important;
}

@media (min-width: 1px) {
  .container {
    max-width: 940px;
  }
  .col-lg-1,
  .col-lg-2,
[...]

Полный фрагмент: https://gist.github.com/ivanminutillo/8557293


5

Вы можете сделать это, используя CSS Bootstrap 3 с неотзывчивыми функциями.

https://github.com/bassjobsen/non-responsive-tb3


1
Приятно, но очень плохо, что это полный набор начальной загрузки css. Было бы неплохо иметь css только для отключения адаптивных функций. Допустим, мы назовем его «nonresponsive.css». Таким образом, если мы включим nonresponsive.css, отзывчивое повторение будет отключено. Если удалить этот CSS, ответ будет восстановлен.
user1995781

1
Вы можете сделать то, что предложили, просто добавив в заголовки исходный bootstrap.css и не отвечающий bootstrap.css, размещенный по указанной выше ссылке. Очевидно, вы можете переименовать его как хотите. Закомментируйте строку, и тогда она будет работать по желанию.
ɐsɹǝʌ ǝɔıʌ

1
Да, но это переопределит всю мою пользовательскую тему начальной загрузки. Например, если я использую тему с сайта bootswatch.com , она будет отменена этим CSS.
user1995781

1
Конечно. Если вы используете настраиваемую тему вместо начальной загрузки, вы потеряете все свои настройки, но не в том случае, если вы используете исходный CSS начальной загрузки
sɹǝʌ ǝɔıʌ

0

Если вам нужен веб-сайт фиксированного размера, это должно быть довольно просто:

// Override container sizes
@container-sm:	700px;
@container-md:	700px;
@container-lg:	700px;

// Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px)

@screen-xs-min: 0px;
@screen-sm-min:	1px;
@screen-md-min: 9999px;
@screen-lg-min: 9999px;

// Disable responsive features such as navbar-collapse
@grid-float-breakpoint: 9999px;

Если вы не используете .container-fluid, добавьте также:

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

-2

Посмотрите www.goo.gl/2SIOJj , работа еще не завершена, но она может вам помочь.

Я использую cookie, чтобы определить, хочу ли я версию для ПК или адаптивную версию. В нижнем колонтитуле страницы вы можете найти два интервала, и в общем случае .js - это скрипт для обработки кликов.

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

function setMobDeskCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + "; path=/";
    window.location.reload();
}

$(function() {
    $(".make_desktop").click(function() {
        setMobDeskCookie('deskmob', 1, 3650);
    });
    $(".make_responsive").click(function() {
        setMobDeskCookie('deskmob', 0, 3650);
    });
});`enter code here`

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

и я также создал non-responseive.css, который заставляет сетку поддерживать версию с большим экраном

в случае, если вы выбираете мобильный, я загружаю / эхо

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

если вы выберете рабочий стол, я бы загрузил / эхо

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

non-responseive.css - это тот, который имеет переопределения для начальной загрузки, меня беспокоит макет, поэтому там не так много, учитывая, что я обрабатываю навигацию по-своему, поэтому css для него, а другие биты находятся в других моих файлах css

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.