fixes #9582: restore img-responsive as a class and move it's mixin to mixins.less

dist/css/bootstrap.css

@@ -344,6 +344,12 @@ img {
   vertical-align: middle;
 }
 
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
 .img-rounded {
   border-radius: 6px;
 }

less/mixins.less

@@ -294,10 +294,10 @@
 
 
 
-// RETINA IMAGE SUPPORT
-// --------------------------------------------------
-
+// Retina images
+//
 // Short retina mixin for setting background-image and -size
+
 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
@@ -314,6 +314,17 @@
 }
 
 
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+.img-responsive(@display: block;) {
+  display: @display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
 // COMPONENT MIXINS
 // --------------------------------------------------
 
@@ -376,7 +387,7 @@
       border-color: @border;
     }
   }
-  
+
   // Hover states for `.table-hover`
   // Note: this is not available for cells or rows within `thead` or `tfoot`.
   .table-hover > tbody > tr {
@@ -710,12 +721,12 @@
   font-size: @font-size;
   line-height: @line-height;
   border-radius: @border-radius;
-  
+
   select& {
     height: @input-height;
     line-height: @input-height;
   }
-  
+
   textarea& {
     height: auto;
   }

less/scaffolding.less

@@ -73,10 +73,8 @@ img {
 }
 
 // Responsive images (ensure images don't scale beyond their parents)
-.img-responsive(@display: block;) {
-  display: @display;
-  max-width: 100%; // Part 1: Set a maximum relative to the parent
-  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+.img-responsive {
+  .img-responsive();
 }
 
 // Rounded corners