更改Bootstrap弹出窗口的宽度
我正在使用Bootstrap 3设计一个页面。我试图在输入元素上使用带有placement: right的弹出窗口。新的Bootstrap确保了如果你使用form-control，你基本上就拥有了一个全宽的输入元素。
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>在我看来，popovers的宽度太小了，因为它们在div中没有留下任何宽度。我想在左侧的输入表单，并在右侧的宽弹出窗口。
大多数情况下，我在寻找一种不需要重写Bootstrap的解决方案。
附加的JsFiddle。第二个输入选项。我不经常使用jsfiddle，所以不知道，但尝试增加输出框的大小以查看结果，在较小的屏幕上甚至看不到它。http://jsfiddle.net/Rqx8T/
回答 18
Stack Overflow用户
发布于 2013-10-26 16:00:44
<div class="row" data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text" />
</div>
</div>基本上，我将popover代码放在行div中，而不是输入div中。解决了这个问题。
Stack Overflow用户
发布于 2014-03-18 00:29:14
使用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!) */
}如果这不起作用，您可能需要下面的解决方案并更改您的container元素。(View the JSFiddle)
Twitter bootstrap容器
如果这不起作用，您可能需要指定容器：
// 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以试用它。
Stack Overflow用户
发布于 2014-03-13 00:44:13
我还需要一个更宽的弹出窗口来显示搜索文本字段。我想出了这个Javascript解决方案(这里是Coffee)：
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))解决方法在最后一行中。在显示弹出窗口之前，max-width选项被设置为自定义值。您还可以向tip元素添加自定义类。
https://stackoverflow.com/questions/19448902
复制相似问题