我正在使用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/
当我想改变一个特定弹出窗口的宽度时，我发现了这个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!) */
}
在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>'
});
如果页面上有多个弹出窗口，这是一个很好的解决方案。
