fix #2572: streamline thumbnails css to allow for offsets

7 files changed, 56 insertions, 21 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 3f7c2b967..30547f2ba 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 106fed157..adb1402c0 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -164,9 +164,6 @@
     width: auto;
     margin: 0;
   }
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
   input[class*="span"],
   select[class*="span"],
   textarea[class*="span"],
@@ -597,9 +594,6 @@
   .thumbnails {
     margin-left: -30px;
   }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
 }
 @media (max-width: 979px) {
   body {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7f47a2124..7d6d80079 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3627,8 +3627,7 @@ input[type="submit"].btn.btn-mini {
   clear: both;
 }
 .thumbnails > li {
-  float: left;
-  margin: 0 0 18px 20px;
+  margin-bottom: 18px;
 }
 .thumbnail {
   display: block;
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
index 9e77a113d..ecb847b37 100644
--- a/less/responsive-1200px-min.less
+++ b/less/responsive-1200px-min.less
@@ -16,8 +16,5 @@
   .thumbnails {
     margin-left: -30px;
   }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
 
 }
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index b2202b5b7..4b8b41fbe 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -124,12 +124,6 @@
     margin: 0;
   }
 
-  // THUMBNAILS
-  // ----------
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
-
   // FORM FIELDS
   // -----------
   // Make span* classes full width
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index f6f4b2351..7cf76524b 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -329,9 +329,9 @@
     </div><!--/span-->
   </div><!--/row-->
 </div>
-
 <br>
 
+
 <!-- Dropdowns
 ================================================== -->
 
@@ -339,7 +339,6 @@
   <h1>Dropdowns</h1>
 </div>
 
-
 <h4>Dropdown link with hash URL</h4>
 <ul class="nav nav-pills">
   <li class="active"><a href="#">Link</a></li>
@@ -375,6 +374,53 @@
     </ul>
   </li>
 </ul>
+<br>
+
+
+<!-- Thumbnails
+================================================== -->
+
+<div class="page-header">
+  <h1>Thumbnails</h1>
+</div>
+
+<h4>Offset thumbnails</h4>
+<ul class="thumbnails">
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3 offset3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </li>
+</ul>
+
 
 
 
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 3a12d4e50..0dfabdf06 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -1,15 +1,19 @@
 // THUMBNAILS
 // ----------
 
+// Make wrapper ul behave like the grid
 .thumbnails {
   margin-left: -@gridGutterWidth;
   list-style: none;
   .clearfix();
 }
+
+// Float li to make thumbnails appear in a row
 .thumbnails > li {
-  float: left;
-  margin: 0 0 @baseLineHeight @gridGutterWidth;
+  margin-bottom: @baseLineHeight;
 }
+
+// The actual thumbnail (can be `a` or `div`)
 .thumbnail {
   display: block;
   padding: 4px;
@@ -23,6 +27,7 @@ a.thumbnail:hover {
   border-color: @linkColor;
   .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }
+
 // Images and captions
 .thumbnail > img {
   display: block;