我正在尝试使用以下 css 代码更改 twitter bootstrap 模态标题的背景颜色。
.modal-header
{
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
}
.modal-header .close{margin-top:2px}
.modal-header h3{margin:0;line-height:30px}
但是这段代码使模态标题的角有角度。在使用上述代码之前，角是圆形的。如何获得具有上述背景颜色的模态标题的圆角？谢谢
您可以使用下面的CSS，将其放入您的自定义CSS中以覆盖引导CSS。
.modal-header {
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #0480be;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
所以，我尝试了这些其他方法，但是有一个非常轻微的刺激，那就是如果你保持模态内容边框半径，在FF和Chrome中，沿着边框会出现一点白色的装饰，甚至如果您在模态标题边框半径上使用 5px。 （标准模态内容边框半径为 6px，因此模态标题边框顶部半径上的 5px 覆盖了一些白色）。
我的解决方案：
.modal-body
{
background-color: #FFFFFF;
}
.modal-content
{
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: transparent;
}
.modal-footer
{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
}
.modal-header
{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
}
！！注意！！
然后您必须设置模态标题、模态内容和模态页脚的背景颜色。这是一个不错的权衡，因为它允许你这样做：
<div class="modal-header bg-primary">
<div class="modal-body bgColorWhite">
<div class="modal-footer bg-info">
编辑
或者更好：
<div class="modal-header alert-primary">
角落实际上在
.modal-content所以你可以尝试这个：
.modal-content {
background-color: #0480be;
}
.modal-body {
background-color: #fff;
}
如果更改页眉或页脚的颜色，圆角将被覆盖。
我所需要的只是：
.modal-header{
background-color:#0f0;
}
.modal-content {
overflow:hidden;
}
overflow: hiddenborder-radius我自己想知道如何更改模态标题的颜色。
在解决问题时，我试图遵循我对 Bootstrap 愿景的解释。我添加了标记类来告诉模态对话框的作用。
modal-success、modal-info、modal-warning 和 modal-error 告诉它们的作用，如果您更改某些模态，您不会因为突然出现一种无法在每种情况下使用的颜色而陷入困境引导程序中的类。 当然，如果你制作自己的主题，你应该更改它们。
.modal-success {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
border-color: #b2dba1;
border-radius: 6px 6px 0 0;
}
在我的解决方案中，我实际上只是复制了引导程序中
alert-success将此类添加到您的CSS文件中以覆盖引导类
.modal-header.modal-header {
background:#0480be;
}
重要的是尝试永远不要编辑 Bootstrap CSS，以便能够从存储库进行更新，并且不会丢失所做的更改或破坏未来版本中的某些内容。
您可以通过简单地将类添加到模态标题来解决这个问题
<div class="modal-header bg-primary text-white">
聚会有点晚了，但这里有另一个解决方案。
简单地将模态的类调整为
alert-danger解决方法是为具有
modal-headerpanel-heading<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header panel-heading"> <!-- change here -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
然后，要更改标题颜色，您可以执行类似的操作（假设您使用的是 jQUery）
jQuery('.modal-content').addClass('panel-danger')
所有其他答案
overflow:hiddenalert-dangerborder-0找到模态内容并添加样式，很简单...
<div class="modal-content" style="background: your-color">