将dt和dd的宽度调整为dl-horizo​​ntal中的内容

Question

使用bootstrap我想获得一个带有.dl-horizontal的响应式定义列表。 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

在您的dt中添加float:left;将解决此问题。如果您使用Web检查器，超过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; }
}