부트 스트랩 팝 오버의 이미지가 팝 오버를 넘칩니다. [중복]
Nov 25 2020
팝 오버에 이미지가있는 페이지를 만들려고합니다. 온라인 데모를 사용하여 만들었지 만 이미지가 특정 크기보다 커지면 팝 오버에서 넘쳐 나오기 시작합니다. 이 문제를 어떻게 해결합니까?
여기 Js Fiddle : https://jsfiddle.net/rdvL6kj9/10/
html :
<div class="container my-4">
<p class="font-weight-bold">This simple example shows how to place an image within a bootstrap popover. You can
define if you want to launch the popover on hover or on click.</p>
<p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/jquery/javascript/popovers/"
target="_blank">Bootstrap Popovers Docs</a></strong></p>
<a class="btn btn-primary" data-toggle="popover-hover" data-img="https://placekitten.com/500/300">Hover
over me</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
js :
// popovers initialization - on hover
$('[data-toggle="popover-hover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return '<img src="' + $(this).data('img') + '" />'; }
});
다음은 문제의 스크린 샷입니다.

답변
1 SaiManoj Nov 25 2020 at 00:43
거의 다 왔습니다. 모든 이미지에서 반응하도록 태그에 부트 스트랩 내장 클래스> class="img-fluid"
를 추가했습니다.img
$('[data-toggle="popover-hover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return '<img src="' + $(this).data('img') + '" class="img-fluid"/>'; }
});
여기에 작동하는 바이올린이 있습니다.
jmona789 Nov 25 2020 at 01:06
미래 에이 질문에 걸려 넘어지는 사람을 위해 답은 다음과 같습니다. 이미지 축소에 문제가 없으면 Sai Manoj의 대답을 사용할 수 있습니다. 최대 너비 속성을 재정의해야하지만 이미지를 더 크게 원할 경우 다음과 같은 팝 오버 클래스에서 :
.popover {
max-width: none;
}