我正在使用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/


当前回答

我还需要一个更宽的弹出窗口搜索文本字段。我想出了这个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元素添加自定义类。

其他回答

在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>'
});

如果页面上有多个弹出窗口,这是一个很好的解决方案。

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解决方案本身是不起作用的。

我也有同样的问题。花了很长时间寻找答案,并找到了自己的解决方案: 在头部添加以下文本:

<风格type = " text / css " > .popover { max-width: 600 px; } > < /风格

你可以在弹出窗口中使用属性data-container="body"

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

在Angular ng-bootstrap中,你可以简单地将container="body"添加到触发弹窗(比如按钮或文本框)的控件中。然后在你的全局样式文件(style.css或style.scss)文件中,你必须添加.popover {max-width: 100% !}。之后,弹出窗口的内容将自动设置为其内容宽度。