dl-horizo​​ntalのコンテンツに対するdtとddの幅を合わせる

Question

ブートストラップを使用して、.dl-horizontalという応答可能な定義リストを取得したいと考えています。 dtの幅は、コンテンツの最大長に適応する必要がありますが、ddは、残りの幅を使用する必要があります。

これはwide screenで動作しますが、画面の幅を狭くすると、ddstaysの左端のマージンがCSSのように定義されます。 tdとddが積み重ねられた場合、これは何らかの形でゼロになるはずですが、margin-left: auto;は、tdの上にddのテキストを表示させます。

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：あなたのDTにfloat:left;を追加

.dl-horizontal dt { 
    width: auto; 
} 

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

Answer 1

は、問題を解決します。ウェブインスペクタを使用している場合、768pxを超えるクラスはfloat：leftを適用しました。

See here for what I mean。モバイルアイコンをクリックするか、ウィンドウで拡大縮小すると、そのアイコンが表示されます。

以下はコメントのあなたの質問に対する答えです。必要なものについては、マージンが存在する必要がある場合と存在しない場合を解決するために、メディアクエリを使用する必要があります。最初のオプションは理想的です。ブラウザにマージンを追加するタイミングを伝えます。 2番目の答えは、マージンを追加しないようにブラウザに指示していることです。 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; } 
}