Bild und mehrere Textzeilen im Bootstrap Dropdown-Menü

Question

Es ist wahrscheinlich eine dumme Frage, aber ich verstehe nicht, warum es nicht funktioniert. Ich muss ein Bootstrap-Menü erstellen, in dem jedes Element ein Bild auf der linken Seite und mehrere Textzeilen auf der rechten Seite ist.

Ich schrieb den folgenden HTML-Code für diese:

<div class="btn-group"> 
    <ul class="dropdown-menu" style="display: block;"> 
     <li> 
      <a href="#" class="clearfix"> 
       <div class="pull-left"> 
        <span>My image</span> 
       </div> 
       <div class="pull-left"> 
        <div>Text on the right</div> 
        <div>Second line of text</div> 
       </div> 
      </a> 
     </li> 
    </ul> 
</div> 

Link zu jsfiddle: https://jsfiddle.net/brucecat5/rr71xmry/

wird jedoch Breite nicht berechnet wird richtig und der zweite Block schwebte unter dem ersten Block bewegt.

Ich verstehe nicht, warum es passiert und was zu tun, um das zu beheben.

P.S. Ich weiß, dass ich es mit display: table-cell implementieren kann, aber ich verstehe einfach nicht den Grund, warum mein Ansatz nicht funktioniert.

Answer 1

Ich denke Problem ist, wie Sie Drop-Down-Menü-Klasse verwenden, versuchen Sie dies:

<div class="btn-group"> 
<ul style="display: block;"> 
    <li> 
     <a href="#" class="clearfix"> 
      <div class="pull-left"> 
       <img src="smiley.gif" alt="Smiley face" width="42" height="42"> 
      </div> 
      <div class="pull-right"> 
       <p>Text on the right</p> 
       <p>Second line of text</p> 
      </div> 
     </a> 
    </li> 
</ul> 

Wenn Sie ein Dropdown-Menü verwenden möchten, können Sie ein Beispiel in dieser Seite aussehen: https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp

Ich hoffe, es hilft.