html-将CSS应用于Bootstrap中的popover

我想将自定义CSS应用于Bootstrap中弹出窗口的标题和内容,但是,似乎我的CSS被忽略了。

如何将特定的CSS分别应用于标题和内容?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>

例如:[http://jsfiddle.net/Mx4Ez/]

MLister asked 2020-08-01T04:16:02Z
3个解决方案
65 votes

原因似乎是javascript正在创建崭新的元素来显示弹出框本身。 这些新元素的CSS类名称与原始CSS名称不同。

尝试将其添加到您的CSS:

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

更新资料

根据所使用的库版本,名称可能有所不同。 如果上述方法不起作用,请尝试使用.popover-header.popover-body

Matt Pinkston answered 2020-08-01T04:29:33Z
8 votes

新创建的元素具有以下层次结构:

.popover
    |_  .popover-title
    |_  .popover-content

它会在触发弹出窗口的元素之后注入(可以通过设置container选项为注入的弹出窗口指定特定容器,在这种情况下,将使用作为容器传递的元素来设置样式)。 因此,要设置弹出窗口的样式,可以使用css,如以下示例所示:

<div id="my-container">
  <a href="#" id="popover-trigger">Popover This!</a>
</div>

<style>
  .popover-title { color: green; }  /* default title color for all popovers */

  #my-container .popover-title { color: red; }  /* specific popover title color */
</style>
isapir answered 2020-08-01T04:29:58Z
6 votes

如果页面上有多个弹出框,并且只想设置其中一个的样式,则可以利用弹出框的template选项添加另一个类:

$("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

我首先使用了文档中template的默认值,然后将my-specific-popover添加到class属性。

jobo3208 answered 2020-08-01T04:30:23Z
translate from https://stackoverflow.com:/questions/17884750/apply-css-to-popover-in-bootstrap