Popovers在一些HTML元素中放错了地方

Question

我在一个项目中工作，我使用jQuery（~2.1.1），Bootstrap（~3.3.1），AngularJS（~1.3.4），Angular-ui-bootstrap（~0.12.0）和一些更多图书馆。我有一个小问题，与angular-bootstrap库的 popover 指令有关。这个小问题是很多的弹出窗口都放错了地方，所以我可能忘记了什么。

从文档甚至是个人测试（Plunker Example Ex. using angular 1.3.4），popover应该看起来与HTML元素的中心对齐，并且它的箭头应该触及元素，如下所示：

问题在于，在我的应用程序中，弹出窗口会以某种方式放错位置（在这种情况下，只有垂直偏移是明显的，因此它不会触及元素），如下所示：

另一个例子（最引人注目的）是使用ng-repat的动态生成列表，如下图所示：

<div class="col-xs-6 col-sm-2 sidebar-offcanvas"
         id="sidebar-left" role="navigation">
        <div class="list-group shadow-bottom" id="sideMenuTitle">
            <span class="list-group-item list-group-item
                disabled offcanvas-title" style="text-align: center">
                <strong>Metrics</strong>
            </span>
            <a popover="{{metrics_messages[$index]}}" popover-popup-delay="450" popover-trigger="mouseenter"
               popover-placement="top" popover-animation="true" ng-repeat="m in metrics" ui-sref="{{m.sref}}"
               class="list-group-item"
               ng-click="selectMetric(m)" ng-class="{active: m.selected}">{{m.caption}}</a>
        </div>
</div>

PS：我将ui.bootstrap包含在“全局”角度模块中，因为他们建议使用Angular Bootstrap Site。

Answer 1

问题与发布此帖子的版本有关，在该版本之后，他们解决了这个问题。