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.
This commit is contained in:
Mark Otto 2013-06-17 14:19:44 -07:00
parent 4436e727ed
commit 37f4a25be4
2 changed files with 21 additions and 21 deletions

View File

@ -548,26 +548,6 @@ dd {
margin-left: 10px;
}
.dl-horizontal:before,
.dl-horizontal:after {
display: table;
content: " ";
}
.dl-horizontal:after {
clear: both;
}
.dl-horizontal:before,
.dl-horizontal:after {
display: table;
content: " ";
}
.dl-horizontal:after {
clear: both;
}
.dl-horizontal dt {
float: left;
width: 160px;
@ -582,6 +562,26 @@ dd {
margin-left: 180px;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
}
.dl-horizontal dd:before,
.dl-horizontal dd:after {
display: table;
content: " ";
}
.dl-horizontal dd:after {
clear: both;
}
hr {
margin: 20px 0;
border: 0;

View File

@ -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;
}
}