twitter bootstrap popover 显示但看起来很奇怪-rails答案

【问题标题】：twitter bootstrap popover displaying but looks weird - railstwitter bootstrap popover 显示但看起来很奇怪-rails
【发布时间】：2012-10-07 15:52:00
【问题描述】：

您好，我正在使用带有 seyhunak / twitter-bootstrap-rails gem 的 twitter 引导弹出框功能。

我认为有以下代码：

<ul class="nav nav-pills subnav">
  <li>
    <a class="label-with-popover" data-content="popover content" data-title="popover title">Home Valuations:</a>
  </li>
</ul>

我的 page.js.coffe 中的以下内容

jQuery ->
$('.label-with-popover').popover()

弹出框出现但看起来像这样：

Bootstrap 弹出框显示奇怪，并带有额外的垂直线：有人知道我该如何解决这个问题吗？

如果您需要更多信息，请告诉我。

【问题讨论】：

您可能有一些冲突的 CSS。如果您尝试在 JSFiddle 或 CodePen 中为我们重现此问题，那将是最好的。
在 jsfiddle 上没有成功。关于什么样的事情可能与此发生冲突的任何提示？
尝试在 jsfiddle 中获取所有 CSS 文件，然后将它们一一删除！
感谢@zetlen 迄今为止的帮助。所以我把它放在 jsfiddle 上看看：jsfiddle.net/beamon/5rT9t。我将继续尝试查找问题，如果您想帮忙，请点击此处的链接。

标签： javascript css ruby-on-rails-3 twitter-bootstrap popover

【解决方案1】：

Bootstrap CSS 和您为项目编写的 CSS 之间存在大量冲突。将来，您应该考虑为自己的通用类（如 .arrow）使用命名空间，否则您的 CSS 会干扰使用此类通用类名的第三方库（如 Bootstrap）。

这是对您的小提琴的修改：http://jsfiddle.net/5rT9t/1/

我删除了.content 上的margin 声明，.arrow 上的padding 值，并且，严格来说，为了演示，添加了一个容器 div 来抵消弹出框，以便您可以看到整个内容。

【讨论】：

你打败了我。谢谢你的课。