我正在使用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/
使用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/
当我想改变一个特定弹出窗口的宽度时，我发现了这个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!) */
}
