css - Prevent Twitter bootstrap empty <dd> filling with next <dd> value

Question

Hello CSS gurus out there,

I love the twitter bootstrap, and I am prototyping a lot of projects based on it, I encountered this problem, where if the dd tag has no HTML inside of it, another dd takes it's place, I understand why this is happening, because of the way the dl is styled it allows dd to expand to more than one row if the content needs to, i don't want to break this lovely styling, i just want to modify it so if the dd value is empty, it just won't collapse, so before i do anything crazy here like server side to hide empty values, or modifying the original behavior or even adding jQuery, i wanted to know if anyone could help, this is a picture to illustrate further what i am saying, it's RTL so the dt is on the right.

Answer 1

I used this style override.

.dl-horizontal > dd:after {
  display: table;
  content: "";
  clear: both;
}