2017-05-21 2 views
0

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

これはwide screenで動作しますが、画面の幅を狭くすると、ddstaysの左端のマージンがCSSのように定義されます。 tdddが積み重ねられた場合、これは何らかの形でゼロになるはずですが、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; 
} 

答えて

0

は、問題を解決します。ウェブインスペクタを使用している場合、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; } 
} 
+0

おかげで、。しかし、私が望むのは、 'dd'はモバイル上の' dt'の下に積み重ねられますが、 'dt'のすぐ下の左端から(マージンなしで)始まるということです。それは可能ですか? – vapoto

+0

あなたがしたいことは、2つのうちの1つです。私は私の答えを更新しました – Ishio

+1

本当にありがとう、私が欲しいものを私に与える! – vapoto

関連する問題