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规则可能是为popover添加属性。我将从FireBug中的检查开始，看看从哪里继承了css规则。

Answer 2

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

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

Answer 3

这是一个优势，添加

.popover .content {
margin: 0;
}

这可以解决你的问题。

Answer 4

更普遍的解决方法是向元素添加data-container='body'以阻止它从元素继承css规则。