將dt和dd的寬度調整爲dl橫向的內容

Question

使用引導程序我想用.dl-horizontal獲得響應式定義列表。 dt的寬度應適應其內容的最大長度，而dd應占用其餘寬度。

這適用於wide screen，但是當屏幕寬度減小時，dd （因爲它的定義與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檢查器，超過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; } 
}