¿Cómo eliminar las funciones de respuesta en Twitter Bootstrap 3?

85

Desde Bootstrap 3, ya no hay archivos separados para hojas de estilo estándar y receptivas. Entonces, ¿cómo puedo eliminar fácilmente las funciones de respuesta?

twitter-bootstrap  responsive-design  media-queries  twitter-bootstrap-3 
— Kanarifugl
fuente
1
Esta publicación de blog tiene información sobre cómo hacerlo y un enlace al final a una versión completa en Github.
— bbill
1
@STLDeveloper preguntó el 3 de diciembre de 2012 a las 16:11. Bootstrap 3 tiene 2 días o algo así.
— kanarifugl
1
@STLDeveloper, está diciendo que los archivos de respuesta ya no están separados en Bootstrap 3 . La publicación del blog y la cuenta de Github de Bootstrap explican los cambios.
— bbill
La documentación de bootstrap describe cómo hacerlo: getbootstrap.com/getting-started/#disable-responsive
— Nicolas Janel
@NicolasJanel tu enlace está muerto.
— Dmitry

Respuestas:

104

Para desactivar los estilos que no son de escritorio, solo tiene que cambiar 4 líneas de código en el archivo variables.less. Establezca los puntos de interrupción del ancho de la pantalla en el archivo variables.less como este:

// Puntos de interrupción de consultas de medios
// ------------------------------------------------ -

// Pantalla / teléfono extrapequeño
// Nota: en desuso @ screen-xs y @ screen-phone a partir de v3.0.1
@ pantalla-xs: 1px;
@ pantalla-xs-min: @ pantalla-xs;
@ pantalla-teléfono: @ pantalla-xs-min;

// Pantalla pequeña / tableta
// Nota: @ screen-sm y @ screen-tablet en desuso a partir de la v3.0.1
@ pantalla-sm: 2px;
@ pantalla-sm-min: @ pantalla-sm;
@ pantalla-tableta: @ pantalla-sm-min;

// Pantalla mediana / escritorio
// Nota: en desuso @ screen-md y @ screen-desktop a partir de v3.0.1
@ pantalla-md: 3px;
@ pantalla-md-min: @ pantalla-md;
@ pantalla-escritorio: @ pantalla-md-min;

// Pantalla grande / escritorio ancho
// Nota: en desuso @ screen-lg y @ screen-lg-desktop a partir de v3.0.1
@ pantalla-lg: 9999px;
@ pantalla-lg-min: @ pantalla-lg;
@ pantalla-lg-escritorio: @ pantalla-lg-min;

Esto establece el ancho mínimo en la consulta de medios de estilo de escritorio más bajo para que se aplique a todos los anchos de pantalla. ¡Gracias a 2calledchaos por la mejora! Algunos estilos base están definidos en los estilos móviles, por lo que debemos asegurarnos de incluirlos.

Editar: chris señala que puede configurar estas variables en el compilador menos en línea en el sitio de arranque

— Jay Douglass
fuente
7
También puede evitar que la barra de navegación se apile cambiando la variable @ grid-float-breakpoint a 1px.
— Chris
8
¡Guau, esto también funciona en el compilador en línea en el sitio de descarga personalizada de bootstrap!
— chris
1
No estoy seguro de que lo anterior funcione. Si alguien define @media (min-width: @screen-sm-min)(es decir, aplica este estilo al punto de interrupción sm y todos los puntos de interrupción superiores; es decir, sm, md, lg), las anulaciones anteriores romperían esa suposición, ya que la definición ya no se aplicaría a md? Configuré @ screen-xs en 1px y @ screen-sm en 1px también (además de que @ screen-md es 1px); de esta manera, se aplican todos los estilos xs, sm y md, reemplazándose a sí mismos con la prioridad del orden de origen.
— Martin Suchanek
1
Es mejor usar 1px para xs, 2px para sm, 3px para md y 9999px para lg. De esta manera, no tendrá barras de navegación ni modales en el "modo móvil".
— 2llamado-caos
1
funciona, pero aún falta la barra de desplazamiento horizontal del navegador
— Cichy
45

Esto se explica en los documentos de lanzamiento oficiales de Bootstrap 3 :

Pasos para deshabilitar las vistas receptivas

Para deshabilitar las funciones de respuesta, siga estos pasos. Véalo en acción en la plantilla modificada a continuación.

  1. Elimine (o simplemente no agregue) la ventana gráfica <meta>mencionada en los documentos CSS
  2. Elimine el ancho máximo en el contenedor para todos los niveles de cuadrícula con ancho máximo: ¡ninguno! Importante; y establezca un ancho regular como ancho: 970px ;. Asegúrese de que esto venga después del CSS Bootstrap predeterminado. Opcionalmente, puede evitar el! Important con media queries o algún selector-fu.
  3. Si usa barras de navegación, deshaga todo el comportamiento de contracción y expansión de la barra de navegación (esto es demasiado para mostrarlo aquí, así que mire el ejemplo).
  4. Para diseños de cuadrícula, haga uso de las clases .col-xs- * además o en lugar de las medianas / grandes. No se preocupe, la cuadrícula de dispositivos extrapequeños se adapta a todas las resoluciones, por lo que está listo.

Aún necesitará Respond.js para IE8 (ya que nuestras consultas de medios todavía están allí y deben ser recogidas). Esto simplemente desactiva el "sitio móvil" de Bootstrap.

Vea también el ejemplo en GetBootstrap.com/examples/non-responsive/

— lborgav
fuente
5
Esto no funcionó para mí. Algunos elementos responden al ancho del puerto de visualización.
— Ziyan Junaideen
@ZiyanJunaideen probablemente te perdiste algo. ¿Puede proporcionar un jsfiddle?
— Adrien Be
1
Esto funcionó para mí. Creo que debería marcarse como la respuesta correcta.
— Dave Stewart
20

Últimamente me he dado cuenta de lo fácil que es hacer que su bootstrap v3.1.1 no responda. Esto incluye barras de navegación para no colisionar. No sé si todo el mundo lo sabe, pero me gustaría compartirlo.

Dos pasos para un Bootsrap v3.1.1 que no responde

Primero, cree un archivo css y asígnele el nombre non-responsive.css. Asegúrese de agregarlo a sus temas o enlace justo después de los archivos CSS de arranque.

En segundo lugar, pegue este código en su archivo non-responsive.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;
}

Eso es todo y disfruta .. ^^

Fuente: non-responsive.css del ejemplo en getbootstrap.com .

— JiNexus
fuente
2
¡Guau muy bonito! Gracias :)
— Ronald Araújo
2
Vínculo a la fuente de su código cuando lo copie / pegue aquí.
— ba0708
11

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

  1. Omita la ventana gráfica <meta>mencionada en los documentos CSS
  2. Anule widthen el .containerpara cada nivel de cuadrícula con un ancho único, por ejemplo, width: 970px !important;asegúrese de que esto venga después del CSS Bootstrap predeterminado. Opcionalmente, puede evitar las !importantconsultas de medios o algunos selectores-fu.
  3. Si usa barras de navegación, elimine todo el comportamiento de contracción y expansión de la barra de navegación.
  4. Para diseños de cuadrícula, use .col-xs-*clases además de, o en lugar de, las medianas / grandes. No se preocupe, la cuadrícula del dispositivo extrapequeño se adapta a todas las resoluciones.
— Sofía
fuente
11

Necesitaba eliminar por completo la función de respuesta de Bootstrap, terminé anulando el comportamiento con el siguiente fragmento:

.container {
    width: 960px !important;
}

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

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

— Iván Minutillo
fuente
5

Puede hacerlo utilizando Bootstrap 3 CSS con funciones que no responden

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

— ɐsɹǝʌ ǝɔıʌ
fuente
1
Bien, pero es una lástima que sea un conjunto completo de bootstrap css. Sería bueno tener el CSS con solo deshabilitar las funciones de respuesta. Digamos que lo llamamos "nonresponsive.css". De esa manera, si incluimos nonresponsive.css, la reestructuración responsive se deshabilita. Si elimina ese CSS, se restaura la respuesta.
— user1995781
1
Puede hacer lo que sugirió simplemente agregando en los encabezados el bootstrap.css original y el bootstrap.css que no responde publicados en el enlace anterior. Obviamente, puede cambiarle el nombre que desee. Comente la línea y luego funcionará como desee.
— ɐsɹǝʌ ǝɔıʌ
1
Sí, pero eso anulará todo mi tema de arranque personalizado. Por ejemplo, si utilizo el tema de bootswatch.com , ese CSS lo anulará.
— user1995781
1
Por supuesto. Si está usando un tema personalizado sobre arrancar si no se pierden todas las personalizaciones, pero no en caso de que utiliza el CSS de arranque inicial
— ɐsɹǝʌ ǝɔıʌ
0

Si desea un sitio web de tamaño fijo, esto debería ser bastante simple:

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

A menos que esté usando .container-fluid, agregue también:

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

Mire www.goo.gl/2SIOJj , es un trabajo en progreso, pero puede ayudarlo.

Utilizo cookies para definir si quiero una versión de escritorio o receptiva. En el pie de página de la página puede encontrar dos intervalos y en general.js es el script para manejar los clics.

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

Terminé dividiendo todos mis css personalizados en dos archivos.No uso la navegación de arranque, sino la mía, así que esa es la mayoría de mis estilos personalizados, por lo que no resolverá todo su problema, pero funciona para mí.

y también creé non-responsive.css que obliga a la cuadrícula a mantener la versión de pantalla grande

en caso de que seleccione el móvil, cargaría / haría eco 

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

en caso de que seleccione escritorio, cargaría / haría eco

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

el non-responsive.css es el que tiene anulaciones para bootstrap, mi preocupación es el diseño, por lo que no hay mucho allí, dado que manejo la navegación a mi manera, por lo que css y los otros bits están en mis otros archivos css

tenga en cuenta que mi configuración se comporta como escritorio incluso en navegadores de escritorio a diferencia de otras soluciones que he visto que solo ignorarán la ventana gráfica que parece haber funcionado solo en dispositivos móviles para mí

— tomhre
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.