बूटस्ट्रैप पॉपओवर में छवि पॉपओवर से बह रही है [डुप्लिकेट]
मैं एक पेज बनाने की कोशिश कर रहा हूं, जिसमें मैं पॉपअप में छवियों का उपयोग करता हूं, मैंने इसे बनाने के लिए एक डेमो का उपयोग किया था, लेकिन जब छवि एक निश्चित आकार से बड़ी हो जाती है तो यह पॉपओवर से बाहर निकलना शुरू हो जाता है। मैं यह कैसे तय करुं?
जेएस फिडेल यहां: 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') + '" />'; }
});
यहाँ इस मुद्दे का एक स्क्रीनशॉट है:
जवाब
आप लगभग वहाँ थे। मैंने सभी छवियों में इसे उत्तरदायी बनाने के 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"/>'; }
});
यहां वर्किंग फिडल है
भविष्य में इस सवाल पर ठोकर खाने वाले किसी भी व्यक्ति के लिए यह पता लगाना जवाब है: यदि आप छवि को सिकोड़ने के साथ ठीक हैं, तो आप साईं मनोज के उत्तर का उपयोग कर सकते हैं, यदि आप चाहते हैं कि छवि बड़ी हो, हालांकि आपको अधिकतम-चौड़ाई वाली संपत्ति को ओवरराइड करने की आवश्यकता है इस तरह की आबादी वर्ग पर:
.popover {
max-width: none;
}