更改Bootstrap popover的宽度

Question

我正在使用Bootstrap 3设计一个页面.我试图placement: right在输入元素上使用popover .新的Bootstrap确保如果你使用form-control你基本上有一个全宽输入元素.

HTML代码看起来像这样:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

在我看来,弹出窗口宽度太低,因为它们不是div中剩下的任何宽度.我想在左侧输入表格,在右侧输入一个宽的弹出窗口.

大多数情况下,我正在寻找一个解决方案,我不必覆盖Bootstrap.

随附的JsFiddle.第二个输入选项.没有使用jsfiddle很多,所以不知道,但尝试增加输出框的大小来查看结果,在较小的屏幕上甚至看不到它. http://jsfiddle.net/Rqx8T/

Answer 1

使用CSS增加宽度

您可以使用CSS来增加弹出窗口的宽度,如下所示:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

如果这不起作用,您可能需要下面的解决方案并更改您的container元素.(查看JSFiddle)

Twitter bootstrap容器

如果这不起作用,您可能需要指定容器:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

更多信息

弹出窗口包含在触发它的元素中.为了将其扩展为"全宽" - 指定容器:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

的jsfiddle

查看JSFiddle以试用它.

JSFiddle:http://jsfiddle.net/xp1369g4/

Answer 2

我还需要一个更广泛的popover用于搜索文本字段.我想出了这个Javascript解决方案(在Coffee中):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

解决方法是在最后一行.在显示弹出窗口之前,max-width选项设置为自定义值.您还可以向tip元素添加自定义类.

Answer 3

我有同样的问题.花了很长时间寻找答案并找到了我自己的解决方案:将以下文字添加到头部:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Answer 4

要更改宽度,您可以使用css

对于想要的固定尺寸

.popover{
    width:200px;
    height:250px;    
}

对于想要的最大宽度:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle:http://jsfiddle.net/Rqx8T/2/

Answer 5

要更改弹出窗口宽度,您可以覆盖模板:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

Answer 6

对于喜欢 JavaScript 解决方案的人。在Bootstrap 4 中， tip() 变成了 getTipElement() 并且它返回一个无 jQuery 对象。因此，为了在 Bootstrap 4 中更改弹出框的宽度，您可以使用：

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Answer 7

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

基本上我把popover代码放在行div中,而不是输入div.解决了这个问题.

Answer 8

在@EML上面描述的关于模态窗口上的弹出窗口以及@ 2called-chaos显示的代码的帮助下,这就是我解决问题的方法.

我在模态上有一个图标,点击时应弹出窗口

我的HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

我的剧本

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });

Answer 9

您可以在 popover 中使用属性 data-container="body"

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Answer 10

这是使用悬停进行操作的非咖啡脚本方式：

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});