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宽度。