Question

我正在尝试使用以下内容将网页的html插入到bootstrap 2.3.2 popover中：

 $.ajax({
   type:"POST",
   url: "Ajax/getHtml",
   data: { u : 'http://stackoverflow.com' },
   dataType: 'html',    
   error: function(jqXHR, textStatus, errorThrown) {
     console.log('error');
     console.log(jqXHR, textStatus, errorThrown);
   }
 }).done(function(html) {
   html = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
   $link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
   $link.data('content', html);
   $(this).html($link);
   // Trigger the popover to open
   $link = $(this).find('a');
   $link.popover("show");
});

这样可以正常工作，但我希望将输出调整为500 x 500像素。我查了一下：

http://getbootstrap.com/2.3.2/javascript.html#popovers

但是没有看到尺寸选项。我怎么能这样做？

Answer 1

您可以使用Bootstrap3 http://getbootstrap.com/javascript/#popovers

中的popover（选项＆＃34;模板＆＃34;）

只需从JavaScript组件中选择一个弹出窗口并下载它（如jQuery插件）http://getbootstrap.com/customize/

Answer 2

您可以使用CSS max-width和max-height属性来限制弹出窗口的宽度和高度。我在此提供了一个如何实现此目的的示例：http://jsfiddle.net/z96svdbe/。为避免内容溢出弹出窗口，您可以将CSS overflow-y属性设置为auto。

以下CSS会将popover限制为300 x 300像素。

  .max-width-popover + .popover {
        max-width: 300px;
        max-height: 300px;
        overflow-y: auto;
  }

如何调整bootstrap 2.3.2 popover的大小

2 个答案: