fix #2860: truncate .dl-horizontal terms and reset to stacked for <767px layouts

docs/assets/css/bootstrap-responsive.css

@@ -139,6 +139,15 @@
   .container-fluid {
     padding: 0;
   }
+  .dl-horizontal dt {
+    float: none;
+    clear: none;
+    width: auto;
+    text-align: left;
+  }
+  .dl-horizontal dd {
+    margin-left: 0;
+  }
   .container {
     width: auto;
   }

docs/assets/css/bootstrap.css

@@ -458,6 +458,9 @@ dd {
   margin-left: 9px;
 }
 .dl-horizontal dt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   float: left;
   clear: left;
   width: 120px;

docs/base-css.html

@@ -371,7 +371,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">Heads up!</span>
+        Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+      </p>
     </div>
   </div><!-- /row -->
 </section>

docs/templates/pages/base-css.mustache

@@ -294,7 +294,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
+      </p>
     </div>
   </div><!-- /row -->
 </section>

less/responsive-767px-max.less

@@ -86,6 +86,21 @@
     padding: 0;
   }
 
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers

less/type.less

@@ -135,6 +135,7 @@ dd {
 // Horizontal layout (like forms)
 .dl-horizontal {
   dt {
+    .text-overflow();
     float: left;
     clear: left;
     width: 120px;