在 Bootstrap4 中，一个空的 <dd> 折叠相应 <dt> 的行高答案

【问题标题】：In Bootstrap4 an empty <dd> collapses line height for corresponding <dt>在 Bootstrap4 中，一个空的 <dd> 折叠相应 <dt> 的行高
【发布时间】：2019-06-20 00:18:43
【问题描述】：

所以我可以看到这个错误之前有过喋喋不休

prevent-twitter-bootstrap-empty-dd-filling-with-next-dd-value

而且开发者之前说过它没有被修复，但是......

如图所示，空地址字段会导致标签之间的边距折叠。它是通过 Django 模板生成的：

<dl class="row">
      <dt class="col-sm-3">Address 1:</dt><dd class="col-sm-9">{{ client.address1|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Address 2:</dt><dd class="col-sm-9">{{ client.address2|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Town:</dt><dd class="col-sm-9">{{ client.town|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">County:</dt><dd class="col-sm-9">{{ client.county|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Postcode:</dt><dd class="col-sm-9">{{ client.postcode|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Telephone1:</dt><dd class="col-sm-9">{{ client.telephone1|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Telephone2:</dt><dd class="col-sm-9">{{ client.telephone2|default_if_none:"&nbsp;" }}</dd>
      <dt class="col-sm-3">Email:</dt><dd class="col-sm-9">{{ client.email|default_if_none:"&nbsp;" }}</dd>
</dl>

注意：我试图强制一个空格以创建一条线。我原以为行间距会由 dt 设置，我理解它应该始终存在并且永远不应该为空？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

只需将min-height 设置为每个dd 元素，如下所示：

dd {
 min-height: 25px;
}

【讨论】：

这在没有 hack 的情况下是行不通的。请参阅下面（上）我的解决方案。

【解决方案2】：

所以我已经设法解决了这个问题，尽管它感觉像是一个 hack，我很惊讶 Bootstrap 没有控制这个问题。使用上面的答案（我之前尝试过一种变体）我最终得到了：

dd.col-sm-9 {
    min-height: 25px;
}

因为简洁的 dd 声明会导致：

【讨论】：

【解决方案3】：

你可以试试这个：

dl dd:after {
  content: "\200b";
}

这是一个 0px 宽度的空间，不会创建新行

【讨论】：