Twitter Bootstrap 的 javascript Popover 看起来不对答案

【问题标题】：Twitter Bootstrap's javascript Popover looking wrongTwitter Bootstrap 的 javascript Popover 看起来不对
【发布时间】：2011-11-24 23:34:40
【问题描述】：

我正在尝试实现 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>

有什么线索可以解释这是什么原因吗？

【问题讨论】：

标签： javascript popover twitter-bootstrap

【解决方案1】：

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

【讨论】：

我在使用他们的“容器”示例应用程序并添加弹出框时遇到了这个问题。

【解决方案2】：

这是一个边缘的东西，添加

.popover .content {
margin: 0;
}

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

是的，这就是问题所在！很久以前就解决了，但仍然是一个好主意，将其发布以供将来参考。

【解决方案4】：

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

【讨论】：