Fixes #10483 and #10357: Make .container mixin-friendly by moving the…

… width declarations within one class
twbs · Nov 28, 2013 · 9d93908 · 9d93908
1 parent c13524e
commit 9d93908
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -807,6 +807,24 @@ pre code {
   clear: both;
 }
 
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+}
+
 .row {
   margin-right: -15px;
   margin-left: -15px;
@@ -1105,9 +1123,6 @@ pre code {
 }
 
 @media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
   .col-sm-1,
   .col-sm-2,
   .col-sm-3,
@@ -1277,9 +1292,6 @@ pre code {
 }
 
 @media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
   .col-md-1,
   .col-md-2,
   .col-md-3,
@@ -1449,9 +1461,6 @@ pre code {
 }
 
 @media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
   .col-lg-1,
   .col-lg-2,
   .col-lg-3,

diff --git a/dist/css/bootstrap.min.css b/dist/css/bootstrap.min.css
diff --git a/less/grid.less b/less/grid.less
@@ -5,6 +5,16 @@
 // Set the container width, and override it for fixed navbars in media queries
 .container {
   .container-fixed();
+
+  @media (min-width: @screen-sm) {
+    width: @container-sm;
+  }
+  @media (min-width: @screen-md) {
+    width: @container-md;
+  }
+  @media (min-width: @screen-lg-min) {
+    width: @container-lg;
+  }
 }
 
 // mobile first defaults
@@ -40,10 +50,6 @@
 // it's full-width.
 
 @media (min-width: @screen-sm-min) {
-  .container {
-    width: @container-sm;
-  }
-
   .make-grid-columns-float(sm);
   .make-grid(@grid-columns, sm, width);
   .make-grid(@grid-columns, sm, pull);
@@ -60,10 +66,6 @@
 // it's full-width.
 
 @media (min-width: @screen-md-min) {
-  .container {
-    width: @container-md;
-  }
-
   .make-grid-columns-float(md);
   .make-grid(@grid-columns, md, width);
   .make-grid(@grid-columns, md, pull);
@@ -80,10 +82,6 @@
 // it's full-width.
 
 @media (min-width: @screen-lg-min) {
-  .container {
-    width: @container-lg;
-  }
-
   .make-grid-columns-float(lg);
   .make-grid(@grid-columns, lg, width);
   .make-grid(@grid-columns, lg, pull);