Fixes issue 10357: "Using .container as a mixin is impossible"

Attempts to solve the problem based on feedback in twbs/bootstrap#10357 (comment)
carlitosvargas · Sep 5, 2013 · e9c27fa · e9c27fa
1 parent 8651180
commit e9c27fa
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 22 deletions.
diff --git a/assets/js/raw-files.js b/assets/js/raw-files.js
diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
@@ -782,6 +782,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;
@@ -924,9 +942,6 @@ pre code {
 }
 
 @media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
   .col-sm-1,
   .col-sm-2,
   .col-sm-3,
@@ -1078,9 +1093,6 @@ pre code {
 }
 
 @media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
   .col-md-1,
   .col-md-2,
   .col-md-3,
@@ -1241,9 +1253,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
@@ -6,6 +6,18 @@
 // 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
@@ -115,10 +127,6 @@
 // it's full-width.
 
 @media (min-width: @screen-sm) {
-  .container {
-    width: @container-sm;
-  }
-
   .col-sm-1,
   .col-sm-2,
   .col-sm-3,
@@ -193,9 +201,6 @@
 // it's full-width.
 
 @media (min-width: @screen-md) {
-  .container {
-    width: @container-md;
-  }
   .col-md-1,
   .col-md-2,
   .col-md-3,
@@ -273,10 +278,6 @@
 // it's full-width.
 
 @media (min-width: @screen-lg-min) {
-  .container {
-    width: @container-lg;
-  }
-
   .col-lg-1,
   .col-lg-2,
   .col-lg-3,