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

Arc*_*nic 7 twitter-bootstrap

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

在此输入图像描述

顶部描述了这个问题.底部是我使用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>
Run Code Online (Sandbox Code Playgroud)

luc*_*nik 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>'
)
Run Code Online (Sandbox Code Playgroud)

  • @lucygenik缺少波浪状的括号.对于一些初学者来说可能并不明显.$ el.popover({...}); (3认同)
  • 完全不考虑这一点.编辑 - 抱歉老兄. (2认同)