2013-07-29 4 views
2

This jsfiddle이 최선이라고 말하고 있지만 잘 작동하는 팝업 트리거가 있습니다. 그러나 컨테이너를 부착하게되면 popover는 찌그러지게됩니다. 왜 그리고 어떻게 해결할 수 있습니까?대상이 부착 된 컨테이너 안에있을 때 부트 스트랩 팝 오버가 중단되는 이유는 무엇입니까?

<script type="text/javascript"> 
$(function() { 
    $(".popover-trigger").popover({ 
     content: function() { 
      return $("#popover-content").html(); 
     } 
    }); 

    $(".btn").click(function(){ 
     var jq = $(".popover-trigger").parent().toggleClass("affix"); 
     var state = jq.hasClass("affix") ? "" : "not"; 
     $(".state").html(state); 
    }); 
}); 
</script> 
<div id="popover-content" class="hide">Lorem ipsum dolor sit amet ... </div> 
<div class="container"> 
    <div class="row"> 
     <div class="well"> 
      <div class="popover-trigger" data-trigger="hover" data-toggle="popover" data-original-title="Popover" data-html="true"> 
       I'm <span class="state">not</span> affixed. 
       <button class="btn">Toggle</button> 
      </div> 
     </div> 
    </div> 
</div> 

답변

4

확실하지 않은 이유는 모르겠지만, this fiddle과 같이 popover의 container 옵션을 설정하면 문제가 해결됩니다.

1

내가 전문가는 생각하지 않지만 CSS의 팝 오버의 크기를 정의하는 것은 그것의 모양을 유지하는지 확인하는 데 도움이 fiddle 업데이트를 참조하십시오. 그 번호는 popover {height: x; width: y}입니다.

+0

죄송합니다. 높이 및 너비 옵션으로 문제가 해결되지 않았습니다. – flipdoubt

+0

당신이 당신 자신의 대답으로 말했듯이, 컨테이너 옵션은 높이와 너비보다 낫습니다. Popover에 의한 움직임 없음! 다행히 문제를 해결했습니다. – Nathan