我正在使用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/
这里没有最终的解决方案:/只是一些如何“干净地”解决这个问题的想法…
更新版本(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宽度值可以解决这个问题，我没有尝试。
使用CSS增加宽度
你可以使用CSS来增加弹出窗口的宽度，如下所示:
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
如果这不起作用，您可能需要下面的解决方案并更改容器元素。(查看JSFiddle)
推特引导容器
如果这不起作用，你可能需要指定容器:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
更多信息
弹出窗口包含在触发它的元素中。为了将其扩展为“全宽度”-指定容器:
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
JSFiddle
查看JSFiddle来尝试一下。
JSFiddle: http://jsfiddle.net/xp1369g4/
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解决方案本身是不起作用的。
借助@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"); });
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)
在Bootstrap 4上，你可以很容易地检查模板选项，通过覆盖max-width:
$('#myButton').popover({
placement: 'bottom',
html: true,
trigger: 'click',
template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
如果页面上有多个弹出窗口，这是一个很好的解决方案。
当我想改变一个特定弹出窗口的宽度时，我发现了这个Bootstrap 5+的解决方案。添加customClass对我有用:
Html:
<button class="btn btn-outline-secondary" id="popover-help" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
<i class="fa fa-question-circle"></i>
</button>
<div id="popover-help-container" style="display: none;">
<h4 style="text-align: left;"> How to:</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.
Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.</p>
</div>
JS:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,{
content: function() {
return $('#popover-help-container').html();
},
html: true,
placement: 'bottom',
sanitize: false,
customClass: 'popover-large'
});
})
</script>
css:
.popover-large {
max-width: 50%; /* Max Width of the popover (depending on the container!) */
}
