fix #2572: streamline thumbnails css to allow for offsets

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 {

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;

less/responsive-1200px-min.less

@@ -16,8 +16,5 @@
   .thumbnails {
     margin-left: -30px;
   }
-  .thumbnails > li {
-    margin-left: 30px;
-  }
 
 }

less/responsive-767px-max.less

@@ -124,12 +124,6 @@
     margin: 0;
   }
 
-  // THUMBNAILS
-  // ----------
-  .thumbnails [class*="span"] {
-    width: auto;
-  }
-
   // FORM FIELDS
   // -----------
   // Make span* classes full width

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>
+
 
 
 

less/thumbnails.less

 // 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;