popover-inner的bootstrap弹窗宽度
我想有一个Bootstrap Popover更宽。 我读到这应该工作：
.popover-inner a { width: 600px; } 但是，浏览器控制台仍然显示上面的代码自动。 很难形容。 这是一个快照：
根据我的bootstrap.css文件，默认是一个max-width属性。
我用这个
.popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; max-width: 600px; padding: 1px; text-align: left; white-space: normal; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; }
它的工作原理是如何打算的。
我的bootstrap.css文件根本不包含popup窗口 – 内部的CSSselect器
bootstrap上有一个拉取请求 ，使得这个更容易，但是你可以使用这种为popover设置template选项的技巧来修改它 ：
$('#yourPopover').popover({ template: '<div class="popover special-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' })
然后，你可以设置你的popover special-class CSS，但是你喜欢（宽度和更多！）
.popover { max-width: 600px; width: auto; }
将最大宽度更改为所需值，如果您愿意，也可以设置min-width
如果你想控制popup窗口的最小宽度，只需在CSS（或额外的CSS）中添加一行额外的行：
.popover { min-width: 200px ! important; }
（用所需的值replace200px）
1）简单的方法:(警告：这将影响所有的popovers）：
只需重写下面的bootstrap.popover样式
.popover{ max-width: 600px; }
2）推荐方式：
$("#a-div-id-001").popover({ //set a custom container // which can minimize the displacement of popover //when window resizing container: $("#Div"), html : true, content: function() { return "<span>Hello there!</span>"; }, viewport: { selector: 'body', padding: 10 }, title:"Apps", template:'<div class="popover my-custom-class" role="tooltip">' +'<div class="arrow"></div><h3 class="popover-title"></h3>' +'<div class="popover-content"></div>' +'</div>' });
首先添加一个自定义类到上面my-custom-class的popover模板。 请注意，popup窗口将使用默认模板呈现，除非您指定了自定义模板。
然后重写bootstrap的.popover样式，如下所示：
div.popover.my-custom-class{ max-width: 600px; }
这种样式可以让你的dynamic宽度达到600px。 如果您需要为popup窗口设置最小宽度，请直接设置宽度选项。 看下面的例子，
div.popover.my-custom-class{ min-width: 600px; }
增加宽度时，可能需要调整popup框与左/右页面边框之间的空间（偏移量）。 查看视口属性，因为它设置了边界。
在.popover禁用max-width ：
.popover { max-width: none; }
然后你可以更自由地玩内容的大小。
这是我使用的示例初始化。
$(".property-price") .popover({ trigger: "hover", placement: 'bottom', toggle : "popover", content : "The from price is calculated ba....the dates selected.", title: "How is the from price calculated?", container: 'body', template: '<div class="popover popover-medium"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>', });
正如你所看到的，它使用了一个自定义模板。 该模板使用定制的popover-medium类。
然后我有一个CSSselect器
.popover-medium { max-width: 350px; }
如果需要，也可以在模板类上设置样式。
这里的一些答案build议只让popover类有一定的宽度。 这是不好的，因为它会影响所有的popup。 使用这样的东西，而不是更有针对性的东西：
.container-div .popover { /* add styles here */ }
... width:auto; ...
在我的情况下是完美的解决scheme。 我在同一页面上有多个popup窗口，其中一个有一个很长的URL。 他们都现在看起来不错。 谢谢JFK！
添加你的popover内容作为HTML与你自己的类，然后在CSS文件中添加：
.popover .own-class { width: ... }
“.own-class”元素宽度将决定popup宽度。
