css - 使 dt 和 dd 的宽度适应 dl-horizo​​ntal 中的内容

Question

使用 bootstrap 我想获得一个带有 .dl-horizo​​ntal 的响应式定义列表。 dt 的宽度应适应其内容的最大长度，而 dd 应占据剩余的宽度。

这适用于 wide screen , 但是当屏幕宽度减小时， dd stays 左边的边距(因为它在 CSS 中是这样定义的)。当 td 和 dd 堆叠时，这应该以某种方式变为零，但是 margin-left: auto; 使 dd文本出现在 td 上。

HTML:

<dl class="dl-horizontal">
<dt>Soup</dt>
<dd>
<ul>
<li>Mushroom </li>
</ul>
</dd>
...
<dt>Desserts</dt>
<dd>
<ul>
<li>Apple crumble </li>
<li>Cold Dessert of the Day </li>
<li>Natural yoghurt with fruit and nuts </li>
</ul>
</dd>
</dl>

CSS:

.dl-horizontal dt {
    width: auto;
}

.dl-horizontal dd {
    margin-left: 3em;
}

Answer 1

将 float:left; 添加到您的 dt 将解决问题。如果你使用 web inspector，超过 768px 类应用了一个 float: left;

See here for what I mean .如果您单击移动图标或在窗口中缩放，它就会出现。

以下是您在评论中提出的问题的答案。对于您想要的，您需要使用媒体查询来解决边距何时应该存在和不应该存在的问题。第一个选项是理想的，因为您告诉浏览器何时添加边距。第二个答案是你告诉浏览器什么时候不添加边距。 768px 通常是平板电脑尺寸开始的时候，这就是为什么我要在那个位置添加边距，或者这就是为什么我说边距在达到那个部分之前为 0。

@media all and ( min-width: 768px ) {
    .dl-horizontal dd { margin-left: 3em; }
}

或

@media all and ( max-width: 767px ) {
    .dl-horizontal dd { margin-left: 0; }
}