Use grid classes or mixins on .dl-horizontal, update docs to include it,...

Use grid classes or mixins on .dl-horizontal, update docs to include it, removes auto truncate and makes .text-overflow mixin into a .text-truncate class and mixin combo for better granularity

dist/css/bootstrap.css

@@ -486,28 +486,17 @@ dd {
   margin-left: 0;
 }
 
-.dl-horizontal dd:before, .dl-horizontal dd:after {
+.dl-horizontal {
+  margin-right: -1.5rem;
+  margin-left: -1.5rem;
+}
+.dl-horizontal:before, .dl-horizontal:after {
   display: table; 
   content: " ";
 }
-.dl-horizontal dd:after {
+.dl-horizontal:after {
   clear: both;
 }
-@media (min-width: 34em) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    overflow: hidden;
-    clear: left;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
 
 abbr[title], abbr[data-original-title] {
   cursor: help;
@@ -5072,6 +5061,12 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   white-space: nowrap;
 }
 
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .text-lowercase {
   text-transform: lowercase;
 }

docs/components/typography.md

@@ -334,19 +334,22 @@ A list of terms with their associated descriptions.
 
 ### Horizontal description
 
-Make terms and descriptions in `<dl>` line up side-by-side. Starts off stacked like default `<dl>`s, but when the navbar expands, so do these.
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
 
 {% example html %}
 <dl class="dl-horizontal">
-  <dt>Description lists</dt>
-  <dd>A description list is perfect for defining terms.</dd>
-  <dt>Euismod</dt>
-  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-  <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>
+  <dt class="col-sm-3">Description lists</dt>
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+  <dt class="col-sm-3">Euismod</dt>
+  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>
+  
+  <dt class="col-sm-3">Malesuada porta</dt>
+  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
+  
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
 

docs/dist/css/bootstrap.css

@@ -486,28 +486,17 @@ dd {
   margin-left: 0;
 }
 
-.dl-horizontal dd:before, .dl-horizontal dd:after {
+.dl-horizontal {
+  margin-right: -1.5rem;
+  margin-left: -1.5rem;
+}
+.dl-horizontal:before, .dl-horizontal:after {
   display: table; 
   content: " ";
 }
-.dl-horizontal dd:after {
+.dl-horizontal:after {
   clear: both;
 }
-@media (min-width: 34em) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    overflow: hidden;
-    clear: left;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
 
 abbr[title], abbr[data-original-title] {
   cursor: help;
@@ -5072,6 +5061,12 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   white-space: nowrap;
 }
 
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .text-lowercase {
   text-transform: lowercase;
 }

scss/_mixins.scss

@@ -34,7 +34,7 @@
 @import "mixins/size";
 @import "mixins/tab-focus";
 @import "mixins/text-emphasis";
-@import "mixins/text-overflow";
+@import "mixins/text-truncate";
 
 // // Components
 @import "mixins/alert";

scss/_type.scss

@@ -142,28 +142,11 @@ dd {
   margin-left: 0; // Undo browser default
 }
 
-// Horizontal description lists
-//
-// Defaults to being stacked without any of the below styles applied, until the
-// grid breakpoint is reached (default of ~768px).
-
+// Horizontal description lists w/ grid classes
 .dl-horizontal {
-  dd {
-    @include clearfix(); // Clear the floated `dt` if an empty `dd` is present
-  }
-
-  @media (min-width: $grid-float-breakpoint) {
-    dt {
-      float: left;
-      width: ($dl-horizontal-offset - 20);
-      clear: left;
-      text-align: right;
-      @include text-overflow();
-    }
-    dd {
-      margin-left: $dl-horizontal-offset;
-    }
-  }
+  margin-right: -$grid-gutter-width;
+  margin-left: -$grid-gutter-width;
+  @include clearfix;
 }
 
 

scss/_utilities.scss

@@ -79,6 +79,7 @@
 .text-center         { text-align: center; }
 .text-justify        { text-align: justify; }
 .text-nowrap         { white-space: nowrap; }
+.text-truncate       { @include text-truncate; }
 
 // Transformation
 .text-lowercase      { text-transform: lowercase; }

scss/mixins/_text-overflow.scss → scss/mixins/_text-truncate.scss

-// Text overflow
+// Text truncate
 // Requires inline-block or block for proper styling
 
-@mixin text-overflow() {
+@mixin text-truncate() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;