Bild als Dropdown im Bootstrap verwenden

Question

Ich versuche ein Bild (Miniaturbild in der Navigationsleiste) als Bootstrap-Dropdown zu verwenden. Ich versuchte die Lösung in [bootstrap Bild-Dropdown] [1]

[1]: In bootstrap, How do I make an image a dropdown? aber es hat nicht funktioniert. Das scheint ziemlich einfach zu sein, aber ich kann es nicht funktionieren. Im Prinzip ist dies das Miniaturbild des Benutzers, wenn es eingeloggt ist und ich möchte ein Drop-Down für Benutzereinstellungen, Abmeldung, usw.

Answer 1

Die Lösung ist ziemlich einfach. Alles, was Sie tun müssen, ist ein "img" -Tag zwischen den Button-Tags.

Wenn Sie immer noch Probleme haben, fügen Sie bitte Ihren Code zusammen mit Ihnen Frage. Hoffe das hilft.

Answer 2

Ich habe es so, wie ich möchte, indem ich Folgendes mache, aber es gibt keinen Handzeiger auf Maus über, ich muss den Zeigerstil hinzufügen und ich bekomme einen weißen Hintergrund hinter meinem Bild, wenn ich auf das Dropdown klicke. Jetzt muss ich den Dropdown-Schalter korrekt formatieren, um das zu beheben. Danke für deine Antwort.

     <li class="side-padded margin_left"> 
         <div class="dropdown top_margin15"> 
          <a class="dropdown-toggle" data-toggle="dropdown"> 
           <?php 
           echo '<img id="profile-img" class="img-circle img-responsive" src="'.base_url().'i/mbr/img/'.$this->auth_user_id.'.jpeg">'; 
           ?> 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Settings</a></li> 
           <li><a href="#">Log Out</a></li> 
           <li><a href="#">Dropdown menu 3</a></li> 
          </ul> 
         </div> 
        </li> 

Answer 3

Ich versuchte es noch einmal und checkte Meetup dot com aus. Ich habe das Drop-down-Menü, während ich auf das Bild ohne den Hintergrund klicke, aber ich konnte keinen Weg finden, das Caret hinzuzufügen.

<div class="container"> 
    <div class="dropdown"> 
     <img class="btn dropdown-toggle" src="images/thumbnail_image.png" alt="dropdown image" data-toggle="dropdown" class="img-responsive"> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Settings</a></li> 
      <li><a href="#">Log Out</a></li> 
      <li><a href="#">Dropdown menu 3</a></li> 
     </ul> 
    </div> 
</div> 

this helps :)