uib-popover 无法按预期使用 DIV 元素

Question

我正在测试 uib-popover，在 plunkr 中似乎一切正常，但是当我将按钮更改为 div 时，弹出窗口似乎移位了。

知道为什么吗？

这是代码，从官方 plunkr 简化而来

<div ng-controller="PopoverDemoCtrl">
    <div class="form-group">
      <label>Popover placement</label>
      <select class="form-control" ng-model="placement.selected" ng-options="o as o for o in placement.options"></select>
    </div>
    <div popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}">Popover {{placement.selected}}</div>
</div>

然后 here is the plunkr 进行测试。

谢谢！

Answer 1

请按如下方式更改您的弹出窗口：- 只需在您的代码中添加 class="btn btn-default"，您的弹出窗口就不会移位。 注意：- 仍然需要较小的 css 修复。

<div popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}" class="btn btn-default">Popover {{placement.selected}}</div>

Answer 2

div 是一个 block 元素，而 button 是一个 内联块 元素。将 style: inline-block 添加到 div，它按预期工作。

<div style="display: inline-block;" popover-placement="{{placement.selected}}" uib-popover="On the {{placement.selected}}">Popover {{placement.selected}}</div>

https://plnkr.co/edit/0UDLTv3ATEtXEjYnJQHF?p=preview

uib-popover 无法按预期使用 DIV 元素

uib-popover not working as expected with a DIV element

angularjs

angular-ui-bootstrap