1.5.  Desactivando el diseño responsive

¿No quieres que tu sitio o aplicación web modifique su aspecto según el dispositivo utilizado por el usuario? En ese caso, y con un poco de esfuerzo, puedes desactivar las características responsive de Bootstrap para que los usuarios con móvil vean el mismo sitio que los usuarios con un navegador de escritorio.

1.5.1. Cómo desactivar el diseño responsive de Bootstrap

Aplica los siguientes pasos para desactivar el diseño responsive de Bootstrap y echa un vistazo al ejemplo que se muestra después:

1. Elimina de tus páginas (o simplemente no añadas) la etiqueta <meta name="viewport" ... > que se explica en los próximos capítulos.
2. Elimina la propiedad max-width de todos los elementos .container aplicando el estilo max-width: none !important; y estableciendo una anchura normal con width: 970px;. Obviamente, debes añadir estos estilos después del CSS por defecto aplicado por Bootstrap.
3. Si utilizas menús y barras de navegación, debes eliminar todos los estilos que hacen que se compriman en dispositivos pequeños. Como este cambio es enorme, será mejor que veas los estilos CSS del ejemplo que se muestra más adelante.
4. Utiliza las clases .col-xs-* (xs = extra-small) para tus diseños basados en rejillas en vez de las otras clases para dispositivos medianos o grandes. No te preocupes porque estas clases .col-xs-* escalan bien para cualquier resolución.

En cualquier caso, si utilizas IE8 debes seguir cargando la librería Respond.js, ya que las media queries siguen siendo necesarias a pesar de los cambios anteriores.

Para que sean más fáciles de entender los cambios anteriores, se muestra a continuación un ejemplo completo de cómo aplicarlos en una página real: Ver ejemplo de diseño no responsive. No olvides echar un vistazo a su código porque se han resaltado claramente todos los cambios realizados.