我正在使用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/
借助@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"); });
这里没有最终的解决方案:/只是一些如何“干净地”解决这个问题的想法…
更新版本(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/
