Bootstrap:如何覆盖popover的动态位置?

时间:2013-02-28 15:14:33

标签: twitter-bootstrap

我会调整bootstrap核心中的位置,但我想保持我的bootstrap-sass gem更新能力。弹出偏移量没有变量,我只需要偏移一种类型的弹出窗口。

enter image description here

顶部描述了这个问题。底部是我使用chrome dev工具调整的。如果我将此更改提交给我的CSS,Bootstrap的动态放置会重新调整,它看起来像上面的情况。有没有办法让popover自动出现在它的父div的范围内?如果没有,我如何克服负边距的动态弹出窗口位置?

更新: 添加代码。这是按钮组的结果HTML。第一个链接上的popover有效,你可以忽略它。

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

2 个答案:

答案 0 :(得分:7)

在阅读了Archonic的PR和FATs回复后,我调查了他所说的模板。

如果你复制Bootstrap的模板并在你的popover选项中指定它,你可以在那时注入类,这至少解决了我的问题。

$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>'
)

答案 1 :(得分:1)

使用bootstrap-tooltip.js中的2行修复它并发出拉取请求。这可以添加您想要的任何样式,以解决您在工具提示或弹出窗口中可能遇到的任何放置问题。

在bootstrap-tooltip.js中,this.$element.trigger('shown')中的show: function ()之前,添加:

$tip.addClass(this.options.class)

然后在this.$element.trigger('hidden')的{​​{1}}之前,添加

hide: function ()

然后在初始化工具提示或弹出窗口时,添加您的样式:

$tip.removeClass(this.options.class)

然后当然在你的CSS中声明$('.bs-popover').popover({html:true, trigger:'click', class:'whatever-you-want'})

它应该比这更容易-_-。不客气!