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

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?

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

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/

Ú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 .

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.

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

Puede hacerlo utilizando Bootstrap 3 CSS con funciones que no responden

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

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;

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

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

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í