在dt

在dt-horizonal中的空dt不与其他dt元素对齐(Empty dt in dt-horizonal not aligning with other dt elements)

我有一个类.dt-horizonal的描述列表，其中我确保dt内容不会通过跟随此帖子并增加宽度来截断。 它工作正常，但是当有一个空的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; }

I have a description list with class .dt-horizonal in which I make sure dt content doesn't truncate by following this post and increasing the width. It works fine but when there is an empty dt it doesn't work thus the alignment of next dd(Canada) is not right as you can see in the following output. Can someone help me fix this?

Bootply

Current output

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

最满意答案

在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> 
  
 
Add a non breaking space to the dt, this will give it some content and maintain the layout. See Here : 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>