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

Question

我有一个包含课程.dt-horizonal的说明列表，其中我确保dt内容不会通过跟踪this帖子并增加宽度来截断。它工作正常，但是当空dt时它不起作用，因此下一个dd（加拿大）的对齐方式不正确，您可以在下面的输出中看到。有人可以帮我解决这个问题吗？

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

查看此添加此Css，因为我们将属性添加到保持宽度的空内容

.dl-horizontal dt:before {
  float: left;
  content: " ";
  height: 1px;
}