이미지를 부트 스트랩에서 드롭 다운으로 사용

Question

이미지 (탐색 모음의 축소판 이미지)를 부트 스트랩 드롭 다운으로 사용하려고합니다. [부트 스트랩 이미지 드롭 다운] [1]

[1] : In bootstrap, How do I make an image a dropdown?의 솔루션을 시도했지만 작동하지 않았습니다. 이것은 상당히 단순 해 보이지만 작동시키지 못합니다. 기본적으로 이것은 로그인 할 때 사용자의 미리보기 이미지이며 사용자 설정, 로그 아웃 등에 대한 드롭 다운을 원합니다.

Answer 1

해결책은 간단합니다. 버튼 태그 사이에 'img'태그를 사용하면됩니다.

<div class="container"> 
    <div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
      <img src="images/example_image.png" alt="dropdown image" class="img-responsive"> 
      <span class="caret"></span> 
     </button> 
     <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> 

여전히 문제가 발생하면 질문과 함께 코드를 첨부하십시오. 희망이 도움이됩니다.

Answer 2

다음과 같은 방법으로 원하는 방식으로 만들었지 만 마우스 위에 손 모양의 포인터가 없으면 포인터 스타일을 추가해야하고 드롭 다운을 클릭하면 내 이미지 뒤에 흰색 배경이 나타납니다. 이제이 문제를 해결하기 위해 드롭 다운 토글을 올바르게 스타일 지정해야합니다. 답장을 보내 주셔서 감사합니다.

     <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

나는 다시 한번 시도하고 모임 업 도트 컴을 체크 아웃했다. 배경없이 이미지를 클릭하는 동안 드롭 다운이 표시되지만 캐럿을 추가하는 방법을 찾을 수 없습니다.

<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> 

희망이 도움이됩니다 : 당신이 우리에게 코드의 버전을 표시합니다 경우