javascript - Twitter Bootstrap 的 javascript Popover 看起来不对

Question

我正在尝试实现 Bootstrap JS 的 Popover ( this )，但由于某种原因，它并没有像预期的那样出现。

这就是我得到的

如您所见，Popover 的主体向左移动，边框有点破损。

这是我的代码

<a class="btn success" id="previewBeforeSubmit"  href="#"
 data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>

<script type="text/javascript">
   $("#previewBeforeSubmit").popover({position: 10, placement: 'above'});
</script>

关于导致这种情况的任何线索？

Answer 1

很可能是 CSS 冲突。您现有的 css 规则可能正在向弹出框添加属性。我将从检查 FireBug 开始，看看从哪里继承了哪些 css 规则。

Answer 2

我猜你正在使用他们的容器示例。如果是，您可以通过注释掉行来解决此问题margin: 0 -20px。它出现在以下块中：

  .content {
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    ...
  }

Answer 3

这是一个边际问题，添加

.popover .content {
margin: 0;
}

这应该可以解决您的问题。

Answer 4

更通用的解决方法是添加data-container='body'到元素以阻止它从（并通过）元素继承 css 规则。