html – 在Bootstrap中应用CSS到popover

我想应用自定义CSS的Bootstrap中的标题和popover的内容,但是,似乎我的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;
    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>

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

原因似乎是javascript正在创建全新的元素来显示popover本身。这些新元素具有不同于原始的CSS类名。

尝试将此添加到您的CSS:

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}
http://stackoverflow.com/questions/17884750/apply-css-to-popover-in-bootstrap

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 在Bootstrap中应用CSS到popover