StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For a more explained procedure see <a href="http://blog.netgloo.com/2014/05/11/how-to-use-twitter-bootstrap-3-for-non-responsive-site/" rel="nofollow noreferrer">How to use Twitter Bootstrap 3 for non-responsive site</a></p> <p>From <a href="http://getbootstrap.com/getting-started/#disable-responsive" rel="nofollow noreferrer">Bootstrap documentation</a> (plus some explanations):</p> <blockquote> <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p> <p>1) <strong>Remove (or just don't add) the viewport <code><meta></code></strong> mentioned in the CSS docs</p> </blockquote> <p>self-explanatory</p> <blockquote> <p>2) Remove the max-width on the <strong><code>.container</code></strong> for all grid tiers with 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.</p> </blockquote> <p>Add this style:</p> <pre><code>.container{ max-width: none !important; width: 970px; } </code></pre> <blockquote> <p>3) If using <strong>navbars</strong>, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).</p> </blockquote> <p>Open <code>variables.less</code> and set the variables:</p> <p><code>@grid-float-breakpoint</code> to <code>0</code></p> <p><code>@screen-xs-max</code> to <code>0</code> (this will be fixed; read <a href="https://stackoverflow.com/a/18902276/1252920">here</a>)</p> <blockquote> <p>4) For grid layouts, <strong>make use of .col-xs-* classes</strong> 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.</p> </blockquote> <p>self-explanatory</p> <blockquote> <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> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload