将Bootstrap中的CSS应用于popover [英] Apply CSS to popover in Bootstrap

问题描述

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

如何申请特定的CSS到标题和内容分别是什么？

$（＃poplink ）.popover（{html：true，placement：right，trigger：hover，title：function（）{return $（.pop-title）。html（）;}，content：function（） {return $（。pop-content）。html（）;}}）;

  html，body {width：100％; height：100％;}。pop-div {font-size：13px; margin-top：100px;}。pop-title {display：none;颜色：蓝色; font-size：15px;}。pop-content {display：none;红色;字体大小：10px;}  

< 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 =poplinkhref =javascript：void（0）;> Pop< / a> < div class =pop-title>标题在这里< / div> < div class =pop-content> Content here< / div>< / div>

b
$ b

例如： http://jsfiddle.net/Mx4Ez/

解决方案

原因似乎是javascript正在创建全新的元素来显示弹出窗口本身。这些新元素具有与原始不同的css类名称。

尝试将此添加到您的css中：

  .popover-title {
颜色：蓝色; 
 font-size：15px; 
} 
 .popover-content {
颜色：红色; 
 font-size：10px; 
} 
  

更新

根据您使用的库版本，名称可能有所不同。如果上述不起作用，请改用 .popover-header 和 .popover-body 。

I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.

How can I apply specific CSS to the title and the content respectively?

$("#poplink").popover({
    html: true,
    placement: "right",
    trigger: "hover",
    title: function () {
        return $(".pop-title").html();
    },
    content: function () {
        return $(".pop-content").html();
    }
});

html, body {
    width: 100%;
    height: 100%;
}
.pop-div {
    font-size: 13px;
    margin-top: 100px;
}
.pop-title {
    display: none;
    color: blue;
    font-size: 15px;
}
.pop-content {
    display: none;
    color: red;
    font-size: 10px;
}

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

For example: http://jsfiddle.net/Mx4Ez/

解决方案

The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.

Try adding this to your css:

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

Update

Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.

这篇关于将Bootstrap中的CSS应用于popover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！