From 4f97df8aa42d2609efd52ea21f1e84124afbe39d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:07:53 -0700 Subject: [PATCH] update non-responsive docs and example to really disable it --- examples/non-responsive/index.html | 2 +- examples/non-responsive/non-responsive.css | 3 ++- getting-started.html | 7 +++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/examples/non-responsive/index.html b/examples/non-responsive/index.html index 7eb2138d1e..35f16cddfc 100644 --- a/examples/non-responsive/index.html +++ b/examples/non-responsive/index.html @@ -27,7 +27,7 @@

What changes

-

Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1.0">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are essentially good to go.

+

Note the lack of the <meta name="viewport" content="width=device-width, initial-scale=1.0">, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.

Non-responsive grid system

diff --git a/examples/non-responsive/non-responsive.css b/examples/non-responsive/non-responsive.css index 19901ca45e..2864ca1c5b 100644 --- a/examples/non-responsive/non-responsive.css +++ b/examples/non-responsive/non-responsive.css @@ -1,5 +1,6 @@ .container { - max-width: 970px; + max-width: none !important; + width: 970px; } .col-xs-4 { diff --git a/getting-started.html b/getting-started.html index b83ec90dd1..68dfedab4d 100644 --- a/getting-started.html +++ b/getting-started.html @@ -260,7 +260,7 @@ bootstrap/

To disable responsive features, follow these steps. See it in action in the modified template below.

  1. Remove (or just don't add) the viewport <meta> mentioned in the CSS docs
    2. -
  2. Force a single max-width on the .container (e.g., .container { max-width: 940px; }). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need !important.
    3. +
  3. Remove the max-width on the .container for all grid tiers with .container { max-width: none !important; } and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  4. For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.

You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

@@ -280,7 +280,10 @@ bootstrap/