更改Bootstrappopup窗口的宽度

我正在devise一个使用Bootstrap 3的页面。我正在尝试使用带有placement: right的popup窗口placement: right在input元素上。 新的Bootstrap确保了如果你使用form-control你基本上有一个全宽input元素。

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中,所以popovers的宽度太低了。 我想要在左侧的input表单,并在右侧广泛的popover。

大多数情况下,我正在寻找一个解决scheme,我不必重写Bootstrap。

附带的JsFiddle。 第二个input选项。 没有使用jsfiddle很多,所以不知道,但尝试增加输出框的大小来查看结果,在较小的屏幕上甚至不会看到它。 http://jsfiddle.net/Rqx8T/

用CSS增加宽度

你可以使用CSS来增加popover的宽度,如下所示:

 /* The max width is dependant on the container (more info below) */ .popover{ max-width: 100%; /* Max Width of the popover (depending on the container!) */ } 

如果这不起作用,您可能需要下面的解决scheme,并更改您的container元素。 ( 查看JSFiddle )


Twitter引导容器

如果这不起作用,您可能需要指定容器:

 // Contain the popover within the body NOT the element it was called in. $('[data-toggle="popover"]').popover({ container: 'body' }); 

更多信息

Twitter Bootstrap popover增加宽度

popup窗口包含在被触发的元素中。为了扩展它“全宽” – 指定容器:

 // 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/

我还需要一个更广泛的search文本字段的popover。 我想出了这个Javascript解决scheme(在这里咖啡 ):

 $(".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")) 

解决方法是在最后一行。 在显示popup窗口之前,最大宽度选项设置为自定义值。 您还可以将自定义类添加到tip元素。

我有同样的问题。 花了相当一段时间寻找答案,并find了我自己的解决scheme:添加以下文本的头:

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

要改变宽度,你可以使用CSS

对于固定的大小通缉

 .popover{ width:200px; height:250px; } 

对于想要的最大宽度:

 .popover{ max-width:200px; height:250px; } 

jsfiddle : http : //jsfiddle.net/Rqx8T/2/

要更改popup宽度,您可以覆盖该模板:

 $('#name').popover({ template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>' }) 
 <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,而不是inputdiv。 解决问题。

在@EML上面描述的关于模态窗口的popover和@ 2called-chaos显示的代码的帮助下,这就是我解决问题的方法。

我有一个模式的图标,当点击应该popup

我的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"); }); 

没有最终的解决scheme在这里:/只是一些想法如何“干净地”解决这个问题…

原始JSFiddle的更新版本(jQuery 1.11 + Bootstrap 3.1.1 + class =“col-xs-”,而不是class =“col-md-”): http : //jsfiddle.net/tkrotoff/N99h7/

现在JSFiddle和你提出的解决scheme一样 : http : //jsfiddle.net/tkrotoff/N99h7/8/
它不起作用:popup窗口的位置相对于<div class="col-*"> +假设你有多个input相同的<div class="col-*">

所以如果我们想要保持input的语义(语义上更好):

  • .popover { position: fixed; } .popover { position: fixed; } :但是每次你滚动页面时,popup窗口都不会跟着滚动
  • .popover { width: 100%; } .popover { width: 100%; } :不好,因为你仍然依赖于父宽度(即<div class="col-*">
  • .popover-content { white-space: nowrap; } .popover-content { white-space: nowrap; } :只有在popup窗口内的文本短于max-width时才有用

http://jsfiddle.net/tkrotoff/N99h7/11/

也许,使用非常新的浏览器, 新的CSS宽度值可以解决这个问题,我没有尝试。

container: 'body'通常是这样做的(见上面的JustAnil的回答),但是如果你的popover处于模态,那么就有一个问题。 z-index在popup窗口附着在body时将其放在模态的后面 。 这似乎与BS2问题5014有关 ,但我在3.1.1上得到它。 你不打算使用一个containerbody ,但如果你修复代码

  $('#fubar').popover({ trigger : 'hover', html : true, dataContainer : '.modal-body', ...etc }); 

那么你解决了z-index问题,但是弹窗宽度仍然是错误的。

我唯一能find的解决方法是使用container: 'body'并添加一些额外的CSS:

 .popover { max-width : 400px; z-index : 1060; } 

请注意,自己的CSS解决scheme将无法正常工作。

你可以在popover中使用属性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> 

你可以用上面指出的方法调整popup窗口的宽度,但是最好的办法是在Bootstrap看到之前定义内容的宽度并且做它的math运算。 例如,我有一个表,我定义了它的宽度,然后bootstrapbuild立一个popover来适应它。 (有时Bootstrap无法确定宽度,你需要介入并握住它的手)

下面是使用hover进行非咖啡标记的方法:

 $(".product-search-trigger").popover({ trigger: "hover", container: "body", html: true, placement: "left" }).on("show.bs.popover", function() { return $(this).data("bs.popover").tip().css({ maxWidth: "300px" }); }); }); 

你也可以添加data-container =“body”来完成这个工作:

 <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-container="body" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> 

我用这个(工作正常):

 .popover{ background-color:#b94a48; border:none; border-radius:unset; min-width:100px; width:100%; max-width:400px; overflow-wrap:break-word; } 

Bootstrap 4 beta的一个testing解决scheme:

 .popover { min-width: 30em !important; } 

结合jQuery语句:

 $('[data-toggle="popover"]').popover({ container: 'body', trigger: 'focus', html: true, placement: 'top' }) 

Side-note, data-container="body"container: "body"在HTML中或作为popover({})对象的option并没有真正做到这一点[也许做的工作,但只能与CSS声明];

另外,请记住,Bootstrap 4 beta依赖于popper.js的popover和tooltip定位(在此之前是tether.js)

尝试这个:

 var popover_size=($('.popover').css('width')); var string=(popover_size).split('px'); alert("string"+string); popover_size = ((parseInt(string[0])+350)); alert("ps"+popover_size); $('.popover').css('width',parseInt(popover_size));