Como remover recursos responsivos no Twitter Bootstrap 3?

85

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?

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— Kanarifugl
fonte
1
Esta postagem do blog contém algumas informações sobre como fazer isso e um link no final para uma versão completa no Github.
— bbill
1
@STLDeveloper perguntou em 3 de dezembro de 12 às 16:11. O Bootstrap 3 tem 2 dias ou algo assim.
— kanarifugl
1
@STLDeveloper, ele está dizendo que os arquivos responsivos não são mais separados no Bootstrap 3 . A postagem do blog e a conta do Bootstrap no Github explicam as mudanças.
— bbill
A documentação do bootstrap descreve como fazer isso: getbootstrap.com/getting-started/#disable-responsive
— Nicolas Janel
@NicolasJanel seu link está morto.
— Dmitry

Respostas:

104

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

— Jay Douglass
fonte
7
Você também pode interromper o empilhamento da barra de navegação alterando a variável @ grid-float-breakpoint para 1px.
— Chris
8
uau, isso também funciona no compilador online do site de download personalizado de bootstrap!
— Chris
1
Não tenho certeza se o acima funciona. Se alguém definir @media (min-width: @screen-sm-min)(ou seja, aplicar este estilo ao ponto de interrupção sm e todos os pontos de interrupção superiores; ou seja, sm, md, lg), as substituições acima quebrariam essa suposição, pois a definição não seria mais aplicada a md? Eu defino @ screen-xs em 1px e @ screen-sm em 1px também (além de @ screen-md ser 1px); desta forma, todos os estilos xs, sm e md são aplicados, substituindo-se pela precedência da ordem de origem.
— Martin Suchanek
1
É melhor usar 1px para xs, 2px para sm, 3px para md e 9999px para lg. Desta forma, você não tem barras de navegação e modais no "modo móvel".
— 2called-chaos
1
funciona, mas a barra de rolagem horizontal do navegador ainda está faltando
— Cichy
45

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/

— Iborgav
fonte
5
Isso não funcionou para mim. Alguns elementos respondem à largura da janela de visualização.
— Ziyan Junaideen
@ZiyanJunaideen você provavelmente perdeu alguma coisa. Você pode fornecer um jsfiddle?
— Adrien Be
1
Isso funcionou para mim. Acho que deveria ser marcada como a resposta correta.
— Dave Stewart
20

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 .

— JiNexus
fonte
2
Uau, muito bom! Obrigado :)
— Ronald Araújo
2
Crie um link para a fonte do seu código ao copiá-lo / colá-lo aqui.
— ba0708
11

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.
— Sophy
fonte
11

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

— Ivan Minutillo
fonte
5

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

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

— ɐsɹǝʌ ǝɔıʌ
fonte
1
Legal, mas uma pena que é um conjunto completo completo de CSS de bootstrap. Seria bom ter o css com apenas para desabilitar os recursos responsivos. Digamos que ele seja denominado "nonresponsive.css". Dessa forma, se incluirmos nonresponsive.css, a reatura responsiva será desativada. Se remover esse css, o responsivo será restaurado.
— user1995781
1
Você pode fazer o que sugeriu apenas adicionando aos cabeçalhos o bootstrap.css original e o bootstrap.css não responsivo postado no link acima. Obviamente, você pode renomeá-lo como quiser. Comente a linha e ela funcionará como desejado.
— ɐsɹǝʌ ǝɔıʌ
1
Sim, mas isso substituirá todo o meu tema de bootstrap personalizado. Por exemplo, se eu usar o tema de bootswatch.com , ele será substituído por esse css.
— user1995781
1
Claro. Se você estiver usando um tema personalizado sobre o bootstrap, você perderá todas as suas personalizações, mas não no caso de usar o CSS de bootstrap original
— ɐsɹǝʌ ǝɔıʌ
0

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;
Expandir snippet

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

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}
— Hrvoje Golcic
fonte
-2

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

— Tomhre
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.