twitter-bootstrap Bootstrap 卡片标题背景颜色错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47057593/
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
Bootstrap card header background color error
提问by Beese
This might be a no brainer, but I can't figure it out.. I'm trying to change the background-color of a bootstrap card-header, but when I add background-color: #00AA9Eit seems to somehow destroy the look of the header..? Has anyone ever seen this before? Does it have something to do with the fact that the card is nested? Is it a bug in bootstrap?
这可能很简单，但我想不通..我正在尝试更改引导卡标题的背景颜色，但是当我添加background-color: #00AA9E它时，它似乎以某种方式破坏了标题的外观.. ? 有没有人见过这个？和卡片嵌套有关系吗？这是引导程序中的错误吗？
Before background-color: #00AA9E
采纳答案by Beese
Found a fix, I sat the card's (not card-header) background-color to #00AA9E, and then sat the card body to white. Probably not the right way to do it but it did the job for me. :)
找到了解决方法，我将卡片（不是卡片标题）的背景颜色设置为 #00AA9E，然后将卡片主体设置为白色。可能不是正确的方法，但它为我完成了工作。:)
回答by David
First off, since you're setting the font-color to white, just use the text-whiteclass.
首先，由于您将字体颜色设置为白色，因此只需使用text-white该类。
However, I do not have the same issue whenever I use this code:
但是，每当我使用此代码时，我都不会遇到相同的问题：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card">
<div class="card-header text-white" style="background-color: #00AA9E;">
Featured
</div>
<div class="card-body">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>Is there something else that could be affecting the style that you aren't showing us?
是否还有其他因素会影响您没有向我们展示的风格？
回答by Mike Devenney
I know it's years later, but I figured I'd add my answer since the accepted answer is a roundabout way of doing this and there is a more straightforward way to do it. Applying !importantto the setting(s) in your css class will cause them to override all settings set in another css class on the same element. Hope this helps someone.
我知道这是几年后的事，但我想我会添加我的答案，因为接受的答案是一种迂回的方法，而且有一种更直接的方法来做到这一点。应用于!importantcss 类中的设置将导致它们覆盖同一元素上另一个 css 类中设置的所有设置。希望这可以帮助某人。
.ph-card-header {
color: white !important;
background-color: navy !important;
}
.ph-card-header {
color: white !important;
background-color: navy !important;
}
