fix overflowing thumbnails in responsive <767px layouts

4 files changed, 39 insertions, 9 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 4a66cd1bb..bae41d33c 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f1ab51a21..03e8cf1a6 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -168,16 +168,22 @@
     width: auto;
     margin: 0;
   }
-  input,
-  textarea,
-  select,
-  .uneditable-input {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-    max-width: 100%;
+  .thumbnails [class*="span"] {
+    width: auto;
   }
+  /*
+    // FORM FIELDS
+    // -----------
+    // Make them behave like divs
+    input,
+    textarea,
+    select,
+    .uneditable-input {
+      .box-sizing(border-box);
+      max-width: 100%;
+      min-height: 20px;
+    }
+  */
 }
 @media (min-width: 768px) and (max-width: 979px) {
   .row {
diff --git a/less/mixins.less b/less/mixins.less
index e142f1a63..cafd7daf9 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -469,18 +469,33 @@
 // Grid System
 // -----------
 
+// Centered container element
 .container-fixed() {
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
 
+// Table columns
 .tableColumns(@columnSpan: 1) {
   float: none; // undo default grid column styles
   width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
   margin-left: 0; // undo default grid column styles
 }
 
+// Make a Grid
+// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
+.makeRow() {
+  margin-left: @gridGutterWidth * -1;
+  .clearfix();
+}
+.makeColumn(@columns: 1) {
+  float: left;
+  margin-left: @gridGutterWidth;
+  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+}
+
+// The Grid
 #grid {
 
   .core (@gridColumnWidth, @gridGutterWidth) {
diff --git a/less/responsive.less b/less/responsive.less
index 0003cd6d0..a83eb8729 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -189,6 +189,13 @@
     margin: 0;
   }
 
+  // THUMBNAILS
+  // ----------
+  .thumbnails [class*="span"] {
+    width: auto;
+  }
+
+/*
   // FORM FIELDS
   // -----------
   // Make them behave like divs
@@ -198,7 +205,9 @@
   .uneditable-input {
     .box-sizing(border-box);
     max-width: 100%;
+    min-height: 20px;
   }
+*/
 }