Jak usunąć responsywne funkcje w Twitter Bootstrap 3?

Jest to wyjaśnione w oficjalnym dokumencie wydania Bootstrap 3 :

Kroki wyłączenia responsywnych widoków

Aby wyłączyć funkcje responsywne, wykonaj następujące czynności. Zobacz go w akcji w zmodyfikowanym szablonie poniżej.

1. Usuń (lub po prostu nie dodawaj) viewport <meta> wymieniony w dokumentach CSS
2. Usuń max-szerokość na .kontener dla wszystkich poziomów siatki o maksymalnej szerokości: brak !ważne; i ustaw regularną szerokość jak width: 970px;. Bądź pewny że następuje to po domyślnym CSS Bootstrap. Można opcjonalnie uniknąć !ważne przy zapytaniach o media lub niektórych selektor-fu.
3. Jeśli używasz pasków nawigacyjnych, Cofnij wszystkie zwijanie i rozszerzanie paska nawigacyjnego(to zbyt wiele, aby pokazać tutaj, więc przejrzyj przykład).
4. dla układów siatki, użyj .klasy col-xs-* oprócz lub w miejsce średnich/dużych. Nie martw się, wyjątkowo mała siatka urządzenia skaluje się do wszystkich rozdzielczości, więc jesteś tam ustawiony.

Nadal będziesz potrzebował odpowiedzi.js dla IE8 (ponieważ nasze zapytania o media wciąż tam są i muszą zostać odebrane). To po prostu wyłącza "witrynę mobilną" Bootstrap.

Zobacz także przykład na GetBootstrap.com/examples/non-responsive/

Po prostu zastanawiam się ostatnio, jak łatwo jest sprawić, że Twój bootstrap v3.1.1 nie reaguje. Obejmuje to navbars, aby nie collpase. Nie wiem, czy wszyscy to wiedzą, ale chciałbym się tym podzielić.

Dwa kroki do nie responsywnego Bootsrapa v3. 1. 1

Najpierw Utwórz plik css o nazwie nie reagujący.css. Upewnij się, że dodajesz go do swoich motywów lub łączy bezpośrednio po plikach css Bootstrap.

Po Drugie, wklej ten kod do swojego nie reaguje.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;
}

Źródło: nie reaguje.css z przykładu w getbootstrap.com .

Źródło od: http://getbootstrap.com/getting-started/#disable-responsive

1. Pomiń viewport <meta> wymieniony w dokumentach CSS
2. nadpisuje width na .container dla każdej warstwy siatki o pojedynczej szerokości, na przykład width: 970px !important; Upewnij się, że jest to po domyślnym CSS Bootstrap. Możesz opcjonalnie uniknąć !important za pomocą zapytań o media lub selektora-fu.
3. Jeśli używasz pasków nawigacyjnych, usuń wszystkie zwijanie i rozszerzanie pasków nawigacyjnych.
4. dla siatki layouts, używaj klas .col-xs-* oprócz lub zamiast średnich/dużych. Nie martw się, wyjątkowo mała siatka urządzenia skaluje się do wszystkich rozdzielczości.

Musiałem całkowicie usunąć funkcję responsywną Bootstrap, ostatecznie nadpisałem zachowanie następującym fragmentem:

.container {
    width: 960px !important;
}

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

Pełny fragment: https://gist.github.com/ivanminutillo/8557293

Możesz to zrobić używając CSS Bootstrap 3 z nie responsywnymi funkcjami

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

Jeśli chcesz mieć stronę o stałym rozmiarze, powinno to być dość proste:

// 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 {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

Spójrz na www.goo.gl/2SIOJj jest to praca w toku, ale może Ci pomóc.

Używam plików cookie, aby określić, czy chcę mieć wersję desktopową lub responsywną. W stopce strony można znaleźć dwa przęsła i ogólnie.js to skrypt do obsługi kliknięć.

        <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`

Skończyłem dzieląc wszystkie moje niestandardowe css na dwa pliki nie używam nawigacji bootstrap, ale mój własny, więc to jest większość moich niestandardowych stylów, więc nie rozwiąże całego problemu ale to działa na me

I stworzyłem również nie responsywny.css, który zmusza siatkę do utrzymania wersji dużego ekranu

W przypadku wybrania telefonu komórkowego załadowałbym / echo

<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" />

W przypadku wybrania pulpitu wczytam / echo

<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" />

Uwaga że moja konfiguracja zachowuje się jak pulpit nawet w przeglądarkach desktopowych, w przeciwieństwie do niektórych innych rozwiązań, które widziałem, że ignoruje tylko viewport, który wydaje się być wotked tylko na urządzeniach mobilnych dla mnie