Bootstrap 引导弹出窗口无响应

gorkyyrv  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(212)

第一次打开时,弹出窗口不能正确显示图像。
你知道我怎样才能确保它总是正确显示吗?
https://jsfiddle.net/n2Lfro30/1/
这是按钮:

<button type="button" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right" data-content="<img src='https://picsum.photos/400'>"> Click me </button>

这是JS:

$(document).ready(function() {
    $('[data-rel=popover]').popover({
      html: true,
      trigger: "hover"
    });
  })
lokaqttq

lokaqttq1#

您可以使用popover模板属性使popover内的图像具有响应性,也可以使用img-fluid类来标记img。
第一个

vxf3dgd4

vxf3dgd42#

这听起来像是您希望图像在容器内部能够响应。对于初学者,可以向图像添加样式width:100%; height:auto,看看它会做什么。(然后我建议使用css代替内联样式进行重构。)

<img src='https://picsum.photos/400' style='width:100%; height:auto'>

用bootstrap的风格,它会-

<img src='https://picsum.photos/400' class='img-responsive'>

https://jsfiddle.net/ho2btzga/

相关问题