]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
update non-responsive docs and example to really disable it
authorMark Otto <otto@github.com>
Sat, 17 Aug 2013 22:07:53 +0000 (15:07 -0700)
committerMark Otto <otto@github.com>
Sat, 17 Aug 2013 22:07:53 +0000 (15:07 -0700)
examples/non-responsive/index.html
examples/non-responsive/non-responsive.css
getting-started.html

index 7eb2138d1e03b189024f1fbe10d49ae38695085c..35f16cddfce30be9fa572d121875d0a492ef9737 100644 (file)
@@ -27,7 +27,7 @@
       </div>
 
       <h3>What changes</h3>
-      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are essentially good to go.</p>
+      <p>Note the lack of the <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>, which disables the zooming aspect of sites in mobile devices. In addition, we reset our container's width and are basically good to go.</p>
 
       <h3>Non-responsive grid system</h3>
       <div class="row">
index 19901ca45e9b952901d283974a56ef3f3bb9c61b..2864ca1c5ba0b60c02807659902496c64bc62930 100644 (file)
@@ -1,5 +1,6 @@
 .container {
-  max-width: 970px;
+  max-width: none !important;
+  width: 970px;
 }
 
 .col-xs-4 {
index b83ec90dd1d5e5c141ab60cc72593eec970c28e5..68dfedab4d7c69d8fde94899b82d23c415fc04df 100644 (file)
@@ -260,7 +260,7 @@ bootstrap/
     <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
     <ol>
       <li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
-      <li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li>
+      <li>Remove the <code>max-width</code> on the <code>.container</code> for all grid tiers with <code>.container { max-width: none !important; }</code> and set a regular width like <code>width: 970px;</code>. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
       <li>For grid layouts, make use of <code>.col-xs-*</code> 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.</li>
     </ol>
     <p>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.</p>
@@ -280,7 +280,10 @@ bootstrap/
 
     <!-- 2. Add our custom CSS to set the container's fixed width -->
     <style>
-      .container { max-width: 940px; }
+      .container {
+        max-width: none !important;
+        width: 970px;
+      }
     </style>
   </head>
   <body>