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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7551622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 16:17:05  来源:igfitidea点击:

Twitter Bootstrap's javascript Popover looking wrong

javascriptpopovertwitter-bootstrap

提问by Benjamin

I'm trying to implement Bootstrap JS's Popover (this), and for some reason it's not showing up like it's supposed to.

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

This is what I'm getting

这就是我得到的

As you can see, the body of the Popover is shifted towards the left, and the border's kinda broken.

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

Here's my code

这是我的代码

<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>

Any clue as to what's causing this?

关于是什么原因造成的任何线索?

回答by Andri

Most likely a CSS conflict. Your existing css rules might be adding attributes to the ones of the popover. I would start with an inspection in FireBug and see what css rules are inherited from where.

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

回答by Lei Yang

I guess you are using their container example. If yes, you can fix this problem by comment out line margin: 0 -20px. It appears in the following block:

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

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

回答by Ralph Hamers

It's a margin thing, add

这是一个保证金的事情,添加

.popover .content {
margin: 0;
}

this should fix your problem.

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

回答by Abram

The more universal fix is to add data-container='body'to the element to stop it from inheriting css rules from (and through) the element.

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