Como remover recursos responsivos no Twitter Bootstrap 3?

Desde o Bootstrap 3 não há mais arquivos separados para folhas de estilo responsivas e padrão. Então, como posso remover facilmente os recursos responsivos?

Para inativar os estilos que não são da área de trabalho, você só precisa alterar 4 linhas de código no arquivo variables.less. Defina os pontos de interrupção da largura da tela no arquivo variables.less assim:

// Media queries breakpoints
// ------------------------------------------------ -

// Tela / telefone extra pequeno
// Observação: @ screen-xs e @ screen-phone obsoletos a partir da v3.0.1
@ screen-xs: 1px;
@ screen-xs-min: @ screen-xs;
@ screen-phone: @ screen-xs-min;

// Tela pequena / tablet
// Observação: Obsoleto @ screen-sm e @ screen-tablet a partir da v3.0.1
@ screen-sm: 2px;
@ screen-sm-min: @ screen-sm;
@ tela-tablet: @ tela-sm-min;

// Tela média / desktop
// Observação: Obsoleto @ screen-md e @ screen-desktop desde a v3.0.1
@ screen-md: 3px;
@ screen-md-min: @ screen-md;
@ screen-desktop: @ screen-md-min;

// Tela grande / área de trabalho ampla
// Observação: Obsoleto @ screen-lg e @ screen-lg-desktop a partir da v3.0.1
@ screen-lg: 9999px;
@ screen-lg-min: @ screen-lg;
@ screen-lg-desktop: @ screen-lg-min;

Isso define a largura mínima na consulta de mídia do estilo da área de trabalho mais baixa para que se aplique a todas as larguras de tela. Obrigado a 2calledchaos pela melhoria! Alguns estilos básicos são definidos nos estilos móveis, portanto, precisamos ter certeza de incluí-los.

Edit: Chris observa que você pode definir essas variáveis ​​no compilador less online no site de bootstrap

Isso é explicado nos documentos oficiais de lançamento do Bootstrap 3 :

Etapas para desativar visualizações responsivas

Para desativar os recursos responsivos, siga estas etapas. Veja-o em ação no modelo modificado abaixo.

1. Remova (ou simplesmente não adicione) a janela de visualização <meta>mencionada nos documentos CSS
2. Remova max-width no .container para todas as camadas da grade com max-width: none! Important; e defina uma largura regular como largura: 970px ;. Certifique-se de que vem após o CSS Bootstrap padrão. Você pode, opcionalmente, evitar o! Important com consultas de mídia ou algum seletor-fu.
3. Se estiver usando navbars, desfaça todo o comportamento de recolhimento e expansão da navbar (isso é demais para mostrar aqui, então dê uma olhada no exemplo).
4. Para layouts de grade, use as classes .col-xs- * além ou no lugar das classes médias / grandes. Não se preocupe, a grade extra pequena do dispositivo se ajusta a todas as resoluções, então você está pronto para isso.

Você ainda precisará do Respond.js para IE8 (já que nossas consultas de mídia ainda estão lá e precisam ser selecionadas). Isso apenas desativa o "site móvel" do Bootstrap.

Veja também o exemplo em GetBootstrap.com/examples/non-responsive/

Eu acabei de descobrir recentemente como é fácil fazer seu bootstrap v3.1.1 não responder. Isso inclui barras de navegação para não colar. Não sei se todos sabem disso, mas gostaria de compartilhar.

Duas etapas para um Bootsrap não responsivo v3.1.1

Primeiro, crie um arquivo css com o nome não responsivo.css. Certifique-se de anexá-lo aos seus temas ou link logo após os arquivos CSS de inicialização.

Em segundo lugar, cole este código em seu.css não responsivo:

/* 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;
}

Isso é tudo e aproveite .. ^^

Fonte: non-responsive.css do exemplo em getbootstrap.com .

Fonte de: http://getbootstrap.com/getting-started/#disable-responsive

1. Omita a janela de visualização <meta>mencionada nos documentos CSS
2. Substitua o widthem .containerpara cada camada da grade por uma única largura, por exemplo. width: 970px !important;Certifique-se de que vem após o CSS Bootstrap padrão. Você pode, opcionalmente, evitar o !importantwith media queries ou algum seletor-fu.
3. Se estiver usando navbars, remova todos os comportamentos de recolhimento e expansão da navbar.
4. Para layouts de grade, use .col-xs-*classes além de, ou no lugar de, as médias / grandes. Não se preocupe, a grade extra pequena do dispositivo se adapta a todas as resoluções.

Eu precisava remover completamente o recurso responsivo do Bootstrap, acabei substituindo o comportamento com o seguinte snippet:

.container {
    width: 960px !important;
}

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

Snippet completo: https://gist.github.com/ivanminutillo/8557293

Você pode fazer isso usando o CSS Bootstrap 3 com recursos não responsivos

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

Se você deseja um site de tamanho fixo, isso deve ser bastante simples:

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

A menos que você esteja usando .container-fluid, adicione também:

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

Veja www.goo.gl/2SIOJj , é um trabalho em andamento, mas pode ajudá-lo.

Eu uso o cookie para definir se desejo uma versão desktop ou responsiva. No rodapé da página você encontra dois spans e no general.js está o script para lidar com os cliques.

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

Acabei dividindo todo o meu css personalizado em dois arquivos. Não uso a navegação de bootstrap, mas a minha, então essa é a maioria dos meus estilos personalizados, então não vai resolver todo o seu problema, mas funciona para mim

e também criei.css não responsivos que força a grade a manter a versão em tela grande

no caso de você selecionar celular eu carregaria / ecoaria

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

no caso de você selecionar desktop eu carregaria / 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" />

o non-responsive.css é aquele que tem overrides para bootstrap minha preocupação é o layout, então não há muito lá, visto que eu manejo a navegação do meu próprio jeito, então css para ele e os outros bits estão em meus outros arquivos css

Observe que minha configuração se comporta como desktop mesmo em navegadores de desktop, ao contrário de algumas outras soluções que vi que só irão ignorar a janela de visualização que parece ter funcionado apenas em dispositivos móveis para mim