更改Bootstrap popover的宽度

Question

我正在使用 Bootstrap 3 设计一个页面。我试图在输入元素上使用 placement: right 的弹出框。新版的 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/

- mayankbatra

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/

- Anil

---

+1，但如果您的弹出窗口在模态框中，则可能不起作用，请参见我的下面的答案。 - EML

上面的回答对我来说太长了，但包含了这个天才的片段，解决了宽度和捕获所有弹出框的问题：$('[data-toggle="popover"]').popover({ container: 'body' }); - Gregory Cosmo Haun

我不得不添加 !important。 - Peter Ehrlich

您可以在元素上使用更简洁的数据属性：data-container="body"。 - tread

@surfer190 在每个弹出窗口的基础上更整洁，但如果您希望每个弹出窗口都有 container: "body"，则会很混乱。 - Chris Cirefice

请注意@popover-max-width变量。如果您自己编译bootstrap less代码，那么覆盖这些变量就很容易了。 - Paul Bormans

Answer 2

我遇到了同样的问题。花了相当长的时间搜索答案，最终找到了自己的解决方案： 在标签中添加以下文本：

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

- Aleksey Shafransky

---

你可能需要添加 !important 来覆盖 Bootstrap 的默认设置。 - John Creamer

Answer 3

我还需要一个更宽的弹出框来显示搜索文本字段。我想出了这个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选项设置为自定义值。您还可以向提示元素添加自定义类。

- 2called-chaos

---

如果你不了解咖啡因，请参考常规js的相同最后一行代码：.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });（该代码用于设置弹出框的最大宽度为600像素） - Colin

.tips()是什么？为什么要使用.data()？ 哈哈我不太明白这个，但它起作用了！我比起撰写新的CSS来替换默认的'max-width'更喜欢这种解决方案。感谢您提供的解决方案！顺便说一句，我将其设置为“无”。这对我更好。 - Taufik Nur Rahmanda

Answer 4

要改变宽度，您可以使用CSS。

对于所需的固定大小

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

需要最大宽度：

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

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

- BENARD Patrick

---

那将首先改变整个站点的弹出框宽度。但是我找到了一个答案，更准确地说是一个解决方法，现在发布它。 - mayankbatra

@Peter，我无法重现你的问题，我认为你只是忘记在输入框中添加data-placement属性了... - BENARD Patrick

@pbenard 我也遇到了同样的问题，你的解决方案可以降低最大宽度至276像素以下。但是如果你试图将最大宽度更改为超过这个值，它就不会改变。 - Hardik Patel

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>'
})

- tyczo

---

对我没有起作用。我需要在样式中添加 max-width: 500px。 - cronfy

Answer 6

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

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

- Dirceu

---

这对我来说有效，但仅适用于width而不是max-width设置。 - Deano

Answer 7

在@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"); });

- ajitweb

Answer 8

<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>

基本上我把弹出框的代码放在了行div里面，而不是输入框div里。这样就解决了问题。

- mayankbatra

---

对我来说没有起作用。我本来以为它会起作用的 :( 奇怪。 - t.durden

Answer 9

您可以在弹出框中使用属性 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>

- Nayan Hodar

Answer 10

以下是使用hover的非CoffeeScript方法:

$(".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"
    });
  });
});

- Abram

---

我认为 "tip()" 不起作用 - 似乎不是一个函数（至少在 bootstrap 4 中不是），然而 "tip" 是可以工作的，但整行代码应该是： return $($(this).data("bs.popover").tip).css({maxWidth: "300px"})。 - infografnet