我正在使用Bootstrap 3设计一个页面。我试图使用一个弹窗的位置:正确的输入元素。新的Bootstrap确保如果你使用表单控件，你基本上有一个全宽的输入元素。
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。
我想在左侧输入表单，并在右侧宽弹窗。
大多数情况下，我正在寻找一个解决方案，我不需要覆盖引导。
附上的JsFiddle。第二个输入选项。没有使用jsfiddle很多，所以不知道，但尝试增加输出框的大小来查看结果，在较小的屏幕上甚至看不到它。
http://jsfiddle.net/Rqx8T/
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解决方案本身是不起作用的。
Bootstrap 4 beta测试的一个解决方案:
.popover {
min-width: 30em !important;
}
和jQuery语句一起使用:
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'focus',
html: true,
placement: 'top'
})
附注:data-container="body"或container: "body"在HTML中或作为弹窗({})对象的选项都没有真正做到这一点[也许do可以，但只有与CSS语句一起];
另外，请记住Bootstrap 4 beta依赖于popper.js来定位弹出窗口和工具提示(在此之前是tether.js)
