twitter-bootstrap Bootstrap：如何覆盖弹出框的动态位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15139046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: How to override dynamic position of popover?
提问by Archonic
I would adjust the placement in the bootstrap core but I'd like to keep my bootstrap-sass gem update-able. There isn't a variable for popover offset and I only need to offset 1 type of popover.
我会调整 bootstrap 核心中的位置，但我想保持我的 bootstrap-sass gem 可更新。没有用于弹出窗口偏移的变量，我只需要偏移 1 种类型的弹出窗口。
The top depicts the issue. The bottom is my adjustment using chrome dev tools. If I commit this change to my css, Bootstrap's dynamic placement readjusts and it looks like the above case again. Is there a way to have the popover automatically appear within the limits of it's parent div? If not, how do I overcome the dynamic popover placement with negative margins?
顶部描述了这个问题。底部是我使用 chrome 开发工具进行的调整。如果我将此更改提交到我的 css，Bootstrap 的动态位置会重新调整，它看起来又像上面的情况。有没有办法让popover自动出现在它的父div的范围内？如果没有，我如何克服具有负边距的动态弹出窗口放置？
UPDATE: Adding the code. This the resulting HTML for the button group. The popover on the first link works, you can ignore it.
更新：添加代码。这是按钮组的结果 HTML。第一个链接上的弹出框有效，您可以忽略它。
<div class="btn-group btn-section pull-right">
<a href="/sections/edit_section_text/118" class="noprint btn active-workers hidden-phone bs-popover btn-primary" data-content="<ul id="sectionworkers" class="unstyled"><li><img alt="Avatar" class="avatar" height="25" src="https://secure.gravatar.com/avatar.php?d=mm&gravatar_id=9ac2c7fd1c8e43cd5b4d73d3cb585973" width="25" /> <small>Ben</small></li></ul> <!-- #sectionworkers -->" data-placement="bottom" data-target="#s118section" id="edit_btn118" rel="popover" data-original-title="Active Users: ">
<i class="icon-edit icon-white"></i> Edit
</a><option>View revision...</option>
<a href="#" class="noprint btn bs-popover" data-content="<select></select>" data-placement="bottom" data-toggle="popover" id="hist_btn" rel="popover" data-original-title="View and difference revisions"><i class="icon-time"></i> History</a>
<div class="popover popover-offset fade bottom in" style="top: 30px; left: 155.5px; display: block;">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title">
View and difference revisions
</h3>
<div class="popover-content">
<select></select>
</div>
</div>
</div>
</div>
采纳答案by lucygenik
After reading Archonic's PR and FATs response, I investigated the template he spoke of.
在阅读了 Archonic 的 PR 和 FATs 回复后，我调查了他所说的模板。
If you copy Bootstrap's template and specify it in your popover options you can inject classes at that point, which at least solved the problem for me.
如果您复制 Bootstrap 的模板并在弹出选项中指定它，您可以在此时注入类，这至少为我解决了问题。
$el.popover(
placement: 'top',
trigger: 'manual',
html: true,
content: @popoverContent,
container: '#mycontainer',
template: '<div class="popover my_ace_class_name"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
)
回答by Archonic
Fixed it with 2 lines in bootstrap-tooltip.js and will make a pull request. This accommodates the addition of any style you want which can fix any placement issues you may have with tooltips or popovers.
用 bootstrap-tooltip.js 中的 2 行修复它，并将发出拉取请求。这可以添加您想要的任何样式，这些样式可以解决您在工具提示或弹出窗口中可能遇到的任何放置问题。
In bootstrap-tooltip.js, just before this.$element.trigger('shown')in show: function (), add:
在 bootstrap-tooltip.js 中，就在this.$element.trigger('shown')in之前show: function ()，添加：
$tip.addClass(this.options.class)
Then just before this.$element.trigger('hidden')in hide: function (), add
然后就在this.$element.trigger('hidden')in之前hide: function ()，添加
$tip.removeClass(this.options.class)
Then when initializing the tooltip or popover, add your style like so:
然后在初始化工具提示或弹出框时，添加您的样式，如下所示：
$('.bs-popover').popover({html:true, trigger:'click', class:'whatever-you-want'})
Then of course declare .whatever-you-wantin your css.
然后当然.whatever-you-want在你的css中声明。
It should have been so much easier than this -_-. You're welcome!
应该比这容易得多-_-。别客气！
