Question

我目前正在使用Bootstrap 3 popover功能在点击按钮时显示图例

图例是一个图像文件，我想在弹出窗口中显示该图像

但图像宽度超出了弹出窗口宽度

即使给出width属性也不会改变弹出窗口宽度。

非常感谢您的帮助。

HTML

<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>

的Javascript

$(function () {
    $('#btnLegend').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         'container':'body'
        }
    );
});

这是我的fiddle

Answer 1

您应该为img标签添加宽度

以下是示例

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
         'title':'Popup Test',
         'html':true
        }
    );
});

如果您不想更改要修复的图像宽度，请更改弹出窗口的最大宽度

.popover{

    max-width:1000px !important;
}

以下是更新后的fiddle

的链接

Answer 2

我使用此解决方案

var $btn = $("#my_btn");
$btn.popover({
  content: '<img src="' + $btn.attr('href') + '">',
  html: true,
  trigger: 'hover',
  placement: 'left',
  container: 'body'
})
.on("show.bs.popover", function(e){
  $(e.target).data("bs.popover").tip().css({"max-width": $btn.data('width') + 50 + "px"});
});

Answer 3

如果您不想更改图像的宽度，则只需设置popover类的max-width或min-width属性即可。 EX：

 .popover{
    max-width:80%;   
}

或

.popover{
    min-width:80%;   
}

但是如果改变图像宽度不是问题，那么只需将图像的宽度设为100％即可。例如：

img{
       width: 100%;
    }

Answer 4

弹出框的宽度约束为其容器宽度的100％。将它设置为正文，它将更宽：

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         /* Set the container for the popover (e.g. body) */
         container: 'body'    
        }
    );
});

查看Anil对this question的回答以获取更多信息。

Answer 5

只需通过CSS限制图片和盒子：

~/.ssh/id_rsa_github

bootstrap：popover中的图像超出了窗口大小

5 个答案: