css - dt-horizo​​nal 中的空 dt 不与其他 dt 元素对齐

Question

我有一个类为.dt-horizo​​nal 的描述列表，其中我确保dt 内容不会被以下this 截断|发布并增加宽度。它工作正常，但是当有一个空的 dt 时它不起作用，因此下一个 dd(Canada) 的对齐方式不正确，如您在以下输出中看到的那样。有人可以帮我解决这个问题吗？

Bootply

当前输出

HTML

<dl class="dl-horizontal">
  <dt>Name</dt>
  <dd>Joe</dd>
  <dt>Age</dt>
  <dd>25</dd>
  <dt>List of Countries visited</dt>
  <dd>USA</dd>
  <dt> </dt>
  <dd>Canada</dd>
  <dt>Country of Orgin</dt>
  <dd>Brazil</dd>
</dl>

CSS

.dl-horizontal dt 
{
    white-space: normal;
    width: 250px; 
    margin-right: 8px;
}

Answer 1

向dt 添加一个不间断空格，这将为其提供一些内容并保持布局。看这里:http://www.bootply.com/Vbo6v6JiaS

<dl class="dl-horizontal">
  <dt>Name</dt>
  <dd>Joe</dd>
  <dt>Age</dt>
  <dd>25</dd>
  <dt>List of Countries visited</dt>
  <dd>USA</dd>
  <dt>&nbsp</dt>
  <dd>Canada</dd>
  <dt>Country of Orgin</dt>
  <dd>Brazil</dd>
</dl>