更改Bootstrappopup窗口的宽度
我正在devise一个使用Bootstrap 3的页面。我正在尝试使用带有placement: right的popup窗口placement: right在input元素上。 新的Bootstrap确保了如果你使用form-control你基本上有一个全宽input元素。
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中，所以popovers的宽度太低了。 我想要在左侧的input表单，并在右侧广泛的popover。
大多数情况下，我正在寻找一个解决scheme，我不必重写Bootstrap。
附带的JsFiddle。 第二个input选项。 没有使用jsfiddle很多，所以不知道，但尝试增加输出框的大小来查看结果，在较小的屏幕上甚至不会看到它。 http://jsfiddle.net/Rqx8T/
用CSS增加宽度
你可以使用CSS来增加popover的宽度，如下所示：
/* The max width is dependant on the container (more info below) */ .popover{ max-width: 100%; /* Max Width of the popover (depending on the container!) */ }
如果这不起作用，您可能需要下面的解决scheme，并更改您的container元素。 （ 查看JSFiddle ）
Twitter引导容器
如果这不起作用，您可能需要指定容器：
// Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' });
更多信息
popup窗口包含在被触发的元素中。为了扩展它“全宽” – 指定容器：
// 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/
我还需要一个更广泛的search文本字段的popover。 我想出了这个Javascript解决scheme（在这里咖啡 ）：
$(".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"))
解决方法是在最后一行。 在显示popup窗口之前，最大宽度选项设置为自定义值。 您还可以将自定义类添加到tip元素。
我有同样的问题。 花了相当一段时间寻找答案，并find了我自己的解决scheme：添加以下文本的头：
<style type="text/css"> .popover{ max-width:600px; } </style>
要改变宽度，你可以使用CSS
对于固定的大小通缉
.popover{ width:200px; height:250px; }
对于想要的最大宽度：
.popover{ max-width:200px; height:250px; }
jsfiddle ： http : //jsfiddle.net/Rqx8T/2/
要更改popup宽度，您可以覆盖该模板：
$('#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>' })
<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，而不是inputdiv。 解决问题。
在@EML上面描述的关于模态窗口的popover和@ 2called-chaos显示的代码的帮助下，这就是我解决问题的方法。
我有一个模式的图标，当点击应该popup
我的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"); });
没有最终的解决scheme在这里：/只是一些想法如何“干净地”解决这个问题…
原始JSFiddle的更新版本（jQuery 1.11 + Bootstrap 3.1.1 + class =“col-xs-”，而不是class =“col-md-”）： http : //jsfiddle.net/tkrotoff/N99h7/
现在JSFiddle和你提出的解决scheme一样 ： http : //jsfiddle.net/tkrotoff/N99h7/8/
它不起作用：popup窗口的位置相对于<div class="col-*"> +假设你有多个input相同的<div class="col-*"> …
所以如果我们想要保持input的语义（语义上更好）：
-
.popover { position: fixed; }.popover { position: fixed; }：但是每次你滚动页面时，popup窗口都不会跟着滚动 -
.popover { width: 100%; }.popover { width: 100%; }：不好，因为你仍然依赖于父宽度（即<div class="col-*"> -
.popover-content { white-space: nowrap; }.popover-content { white-space: nowrap; }：只有在popup窗口内的文本短于max-width时才有用
见http://jsfiddle.net/tkrotoff/N99h7/11/
也许，使用非常新的浏览器， 新的CSS宽度值可以解决这个问题，我没有尝试。
container: 'body'通常是这样做的（见上面的JustAnil的回答），但是如果你的popover处于模态，那么就有一个问题。 z-index在popup窗口附着在body时将其放在模态的后面 。 这似乎与BS2问题5014有关 ，但我在3.1.1上得到它。 你不打算使用一个container的body ，但如果你修复代码
$('#fubar').popover({ trigger : 'hover', html : true, dataContainer : '.modal-body', ...etc });
那么你解决了z-index问题，但是弹窗宽度仍然是错误的。
我唯一能find的解决方法是使用container: 'body'并添加一些额外的CSS：
.popover { max-width : 400px; z-index : 1060; }
请注意，自己的CSS解决scheme将无法正常工作。
你可以在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>
你可以用上面指出的方法调整popup窗口的宽度，但是最好的办法是在Bootstrap看到之前定义内容的宽度并且做它的math运算。 例如，我有一个表，我定义了它的宽度，然后bootstrapbuild立一个popover来适应它。 （有时Bootstrap无法确定宽度，你需要介入并握住它的手）
下面是使用hover进行非咖啡标记的方法：
$(".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" }); }); });
你也可以添加data-container =“body”来完成这个工作：
<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-container="body" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div>
我用这个（工作正常）：
.popover{ background-color:#b94a48; border:none; border-radius:unset; min-width:100px; width:100%; max-width:400px; overflow-wrap:break-word; }
Bootstrap 4 beta的一个testing解决scheme：
.popover { min-width: 30em !important; }
结合jQuery语句：
$('[data-toggle="popover"]').popover({ container: 'body', trigger: 'focus', html: true, placement: 'top' })
Side-note， data-container="body"或container: "body"在HTML中或作为popover({})对象的option并没有真正做到这一点[也许做的工作，但只能与CSS声明];
另外，请记住，Bootstrap 4 beta依赖于popper.js的popover和tooltip定位（在此之前是tether.js）
尝试这个：
var popover_size=($('.popover').css('width')); var string=(popover_size).split('px'); alert("string"+string); popover_size = ((parseInt(string[0])+350)); alert("ps"+popover_size); $('.popover').css('width',parseInt(popover_size));
