All geek questions in one place

Use HTML definition list case and issue via bootstrap

I use the definition list (dl, dd, dt) to display the browse page (object details). The description list is not suitable for this utility?

When used with Twitter bootstrap, when <dd></dd> empty, all content moves up. It is undesirable to show the details of an object that may contain some properties empty.

See the fiddle here http://jsfiddle.net/cPwHr/

This is mistake? how can i prevent this. Or should I use a regular list (ul, li ..) or a table.

+6
source share
2 answers

You can simply use unused space if you don't have a definition instead of leaving it blank. This way all css rules will still apply as expected.

  <dt>Description lists</dt> <dd>&nbsp;</dd>
+6
source

You can also use this style override:

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

For the answer to this @ gael-marziou, see this topic: Prevent Twitter from loading an empty <dd> filling with the following <dd> value

+6
source

Source: https://habr.com/ru/post/927066/

More articles:


All Articles