Better clearing on `.dl-horizontal` for empty `dd` elements

Instead of clearing the entire `.dl-horizontal`, we've moved the
clearfix mixin to the `dd` level to solve two problems in one: empty
`dd`s mid-list, and empty `dd` as the last child.

Addresses a few old issues, including #2824, #3819, #3821, #4062,
#6707, and #7180.

Sorry that took so long :D.

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 04d5bc1fd9b14408345c75778643add3c1845140..a99125994f7b8208248a75ea7d221c7539cc4651 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -548,38 +548,38 @@ dd {
   margin-left: 10px;
 }
 
-.dl-horizontal:before,
-.dl-horizontal:after {
-  display: table;
-  content: " ";
+.dl-horizontal dt {
+  float: left;
+  width: 160px;
+  overflow: hidden;
+  clear: left;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.dl-horizontal:after {
-  clear: both;
+.dl-horizontal dd {
+  margin-left: 180px;
 }
 
-.dl-horizontal:before,
-.dl-horizontal:after {
+.dl-horizontal dd:before,
+.dl-horizontal dd:after {
   display: table;
   content: " ";
 }
 
-.dl-horizontal:after {
+.dl-horizontal dd:after {
   clear: both;
 }
 
-.dl-horizontal dt {
-  float: left;
-  width: 160px;
-  overflow: hidden;
-  clear: left;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.dl-horizontal dd:before,
+.dl-horizontal dd:after {
+  display: table;
+  content: " ";
 }
 
-.dl-horizontal dd {
-  margin-left: 180px;
+.dl-horizontal dd:after {
+  clear: both;
 }
 
 hr {

diff --git a/less/type.less b/less/type.less
index a74bdaeffeb428d58d475f51fbfa2b5a03a34780..9a6811e3d39267931068adc61e4cb8fdeb1b2dfb 100644 (file)
--- a/less/type.less
+++ b/less/type.less
@@ -149,7 +149,6 @@ dd {
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
-  .clearfix(); // Ensure dl clears floats if empty dd elements present
   dt {
     float: left;
     width: (@component-offset-horizontal - 20);
@@ -158,6 +157,7 @@ dd {
     .text-overflow();
   }
   dd {
+    .clearfix(); // Clear the floated `dt` if an empty `dd` is present
     margin-left: @component-offset-horizontal;
   }
 }