Prevent Twitter bootstrap empty filling with next 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 H

Answer 1

According to the developer, <dd> should never be empty (which I disagree).

And I think he prefer users to add clearfix class to the <dd>s that might be empty.

<dd class="clearfix"></dd>

Update

This fix is included after 3.2, see release note.

Answer 2

I used this style override.

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

Answer 3

Example:

<dd><%= @route.id %>&nbsp;</dd>

http://www.sitepoint.com/forums/showthread.php?442551-When-dd-%28in-a-definition-list%29-is-empty-below-content-is-pulled-upwards

Answer 4

Maybe you can try just that:

dd {
    display: inline-block;
}

Answer 5

If I'm interpreting this commit properly, this will be default behaviour in 3.0.0. Until then you can also try adding dl-horizontal as an alternative to simply clearfix.

<dd class="dl-horizontal"></dd>