这里没有最终的解决方案:/只是一些如何“干净地”解决这个问题的想法…

更新版本(jQuery 1.11 + Bootstrap 3.1.1 + class="col-xs-"而不是class="col-md-")的原始JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

现在使用您提出的解决方案:http://jsfiddle.net/tkrotoff/N99h7/8/ 它不起作用:弹出窗口的定位相对于<div class="col-*"> +想象你有多个输入相同的<div class="col-*">…

所以如果我们想让弹出窗口保持在输入上(语义上更好):

.popover{位置:固定;}:但是当你每次滚动页面时，弹出窗口将不会跟随滚动 .popover{宽度:100%;}:不是很好，因为你仍然依赖于父宽度(即<div class="col-*"> .popover-content {white-space: nowrap;}:仅当弹出窗口内的文本短于max-width时才有效

参见http://jsfiddle.net/tkrotoff/N99h7/11/

也许，使用最近的浏览器，新的CSS宽度值可以解决这个问题，我没有尝试。

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

container: 'body'通常是这样的(参见上面JustAnil的回答)，但如果你的弹窗是在一个模态中，就会有一个问题。当弹窗附加到body时，z索引将它放在模态后面。这似乎与BS2 5014问题有关，但我在3.1.1上得到了它。你不需要使用容器的主体，但是如果你将代码修正为

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

然后你修复了z-index问题，但弹窗宽度仍然是错误的。

我能找到的唯一解决办法是使用container: 'body'，并添加一些额外的css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

注意，css解决方案本身是不起作用的。

我使用了这个(工作正常):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

要改变宽度，你可以使用css

需要固定尺寸

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

需要的最大宽度:

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

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

在Angular ng-bootstrap中，你可以简单地将container="body"添加到触发弹窗(比如按钮或文本框)的控件中。然后在你的全局样式文件(style.css或style.scss)文件中，你必须添加.popover {max-width: 100% !}。之后，弹出窗口的内容将自动设置为其内容宽度。