更改twitter bootstrappopup窗口的宽度
我正在尝试使用bootstrap 3来更改twitter bootstrap popover的宽度：
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> $('#popover').popover(options)
目前，popover中的内容分布在两行。 我想让popover内容保持在一行。 这可能吗？
我正在使用C＃，HTML和CSS。
你可以用CSS来改变popover的尺寸：
.popover{ width:200px; height:250px; }
但是那个CSS会改变所有的popup。 你需要做的是将button放在一个容器元素，并使用CSS这样的：
#containerElem .popover { width:200px; height:250px; }
您还需要更改data-container="#containerElem"以匹配您的容器。
注：如果您的popup窗口的宽度大于276px，则还需要覆盖max-width属性。 因此，在.popover {}类中添加max-width: none 。
这是一个jsFiddle： http : //jsfiddle.net/4FMmA/
如果你想在javascript中控制宽度：
HTML（来自Bootstrap的例子）
<button id="exampleButton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on top</button>
使用Javascript：
当show.bs.popover事件触发时，我们设置最大宽度：
var p = $("#exampleButton").popover(); p.on("show.bs.popover", function(e){ p.data("bs.popover").tip().css({"max-width": "500px"}); });
http://jsfiddle.net/ctoesca/u3kSk
- 您还可以在button元素上添加一个
data-max-width属性，并在触发器函数中获取该值：
p.on("show.bs.popover", function(e){ var w = $(this).attr("data-max-width"); p.data("bs.popover").tip().css({"max-width": w}); });
.popover{ max-width: 100%; width: <width>; }
“最大宽度”将popover的最大宽度设置为页面的宽度。 您可以随意设置宽度
我可能有一个更简单的解决scheme
添加下面的CSS类 ：
.app-popover-fw { width: 276px; }
为您的popup窗口使用以下模板
var newPopoverTemplate = '<div class="popover app-popover-fw" role="popover">' + '<div class="arrow"></div>'+ '<h3 class="popover-title"></h3>'+ '<div class="popover-content"></div>'+ '</div>'; $('#example').popover({template: newPopoverTemplate });`
工作小提琴 ： http : //jsfiddle.net/b5Ly2ynd/
注意 ：正如其他人所说，bs popovers有一个“最大宽度”属性。 如果你想让你的popover大于276px，你需要改变这个。
你可以调整popover的宽度，但是最好的办法是在Bootstrap看到之前定义内容的宽度。 例如，我有一个表，我定义了它的宽度，然后bootstrapbuild立一个popover来适应它。 （有时Bootstrap无法确定宽度，你需要介入并握住它的手）
我使用了下面的代码：
.popover { width: 600px; max-width: 600px; font-size: 13px; font-family: Menlo,Monaco,Consolas,"Courier New",monospace; word-break: break-all; word-wrap: break-word; white-space: pre; width: 600px; }
使用这个代码。 它会正常工作：
.popover{ background-color:#b94a48; border:none; border-radius:unset; min-width:100px; width:100%; max-width:400px; overflow-wrap:break-word; }
另一个select是使用自定义模板（仅添加额外的类：popover-lg）：
<div class="popover popover-lg" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
然后在CSS：
.popover-lg { max-width: 100%; }
调用：
$(".your-element")..popover({ trigger: "hover", template: templateString, container: "body", content: '...', });
这样干净，不会干扰原始的引导行为。
你可以通过两种方式来实现这一点，一种是通过减小类“popover”的字体大小，另一种是通过减less类“popover-content”中的填充。 这是我如何实现的，
.popover { font-size: 12px; } .popover-content { padding: 5px 5px; }
