fix #2572: streamline thumbnails css to allow for offsets

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 3f7c2b967e48aabe503003a6fd2c8f028465c9fc..30547f2ba7dd0e035ffbe540e2de5410b989fd0f 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 106fed157e8ed5c6b98e27b76ac0acda0c3f0291..adb1402c0edb3883f9919bce9d741e0ca675ef44 100644 (file)
--- 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 7f47a21249c83cf8c1ec2c587f97bc0590a6675a..7d6d80079ceb53e67a666f157e1025255dbb5d98 100644 (file)
--- 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 9e77a113d75b8c9a6ddfb6bd59dddc601fcddc94..ecb847b37e37cc54ba7a4a23c35e876b63e4137a 100644 (file)
--- 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 b2202b5b77b5b866830fd3f46e90ab1ed04af13a..4b8b41fbe2aefc6268e0048a66413c7bff36944e 100644 (file)
--- 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 f6f4b2351cc8100def11fff004f4e419ca955d4e..7cf76524b068ce9e174506fe3e6e3ef9f51e9221 100644 (file)
--- 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 3a12d4e5095ca1018b239fe5c2c794fbf65954be..0dfabdf06dc8f7db0e8c8f63b3f347acf75a83b3 100644 (file)
--- 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;