Skip to content

Commit

Permalink
fixes #10406: Update grid to use width on .container instead of max-w…
Browse files Browse the repository at this point in the history
…idth as IE8 improperly computes width
  • Loading branch information
mdo committed Sep 3, 2013
1 parent 5eead87 commit 0a78e79
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 12 deletions.
6 changes: 3 additions & 3 deletions dist/css/bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -905,7 +905,7 @@ pre code {

@media (min-width: 768px) {
.container {
max-width: 750px;
width: 750px;
}
.col-sm-1,
.col-sm-2,
Expand Down Expand Up @@ -1059,7 +1059,7 @@ pre code {

@media (min-width: 992px) {
.container {
max-width: 970px;
width: 970px;
}
.col-md-1,
.col-md-2,
Expand Down Expand Up @@ -1222,7 +1222,7 @@ pre code {

@media (min-width: 1200px) {
.container {
max-width: 1170px;
width: 1170px;
}
.col-lg-1,
.col-lg-2,
Expand Down
2 changes: 1 addition & 1 deletion dist/css/bootstrap.min.css

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions getting-started.html
Original file line number Diff line number Diff line change
Expand Up @@ -275,12 +275,9 @@ <h1 id="disable-responsive">Disabling responsiveness</h1>
<h3>Steps to disable page responsiveness</h3>
<ol>
<li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
<li>Remove the <code>max-width</code> on the <code>.container</code> for all grids with <code>max-width: none !important;</code> and set a regular
width, for example <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>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</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>If using navbars, remove all navbar collapsing and expanding behavior.</li>
<li>For grid layouts, use <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 to all resolutions.</li>
<li>For grid layouts, use <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 to all resolutions.</li>
</ol>
<p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
This disables the "mobile site" aspects of Bootstrap.</p>
Expand Down Expand Up @@ -710,6 +707,9 @@ <h3>Internet Explorer 8 and 9</h3>

<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details and additional browser support of CSS3 and HTML5 features.</p>

<h3>Internet Explorer 8 and box-sizing</h3>
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, and <code>max-height</code>. For that reason, as of v3.0.1, we have moved from <code>max-width</code> on <code>.container</code>s.</p>

<h3>IE Compatibility modes</h3>
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
{% highlight html %}
Expand Down
6 changes: 3 additions & 3 deletions less/grid.less
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@

@media (min-width: @screen-sm) {
.container {
max-width: @container-sm;
width: @container-sm;
}

.col-sm-1,
Expand Down Expand Up @@ -194,7 +194,7 @@

@media (min-width: @screen-md) {
.container {
max-width: @container-md;
width: @container-md;
}
.col-md-1,
.col-md-2,
Expand Down Expand Up @@ -274,7 +274,7 @@

@media (min-width: @screen-lg-min) {
.container {
max-width: @container-lg;
width: @container-lg;
}

.col-lg-1,
Expand Down

0 comments on commit 0a78e79

Please sign in to comment.