fix overflowing thumbnails in responsive <767px layouts

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 4a66cd1bb12d59b6226131da601cf59a3f2bcf11..bae41d33c30bf65d9be75cd22eabbdd20cb9f6c5 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f1ab51a219394e758c437abd2a44ac7a45e9b008..03e8cf1a617be18111db0b27bed43e4b3bf28625 100644 (file)
--- 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 e142f1a63390f329aa63fb054c50c58a384f0252..cafd7daf909d8eb3b18cfa7402691b567a2e3e1d 100644 (file)
--- 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 0003cd6d04bf84fd8d4b9527e4e1d67b6e22c4eb..a83eb872931154edac42f7c22d40ee2d344edf94 100644 (file)
--- 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;
   }
+*/
 }