.modal-header 在应用新背景时丢失左上角和右上角半径

Question

我正在使用 bootbox.js 向我的 user.To 显示一些确认和错误消息，这样做我为 bootbox 提供了 className 属性，但是我注意到左上角和右上角的半径当我应用 class 改变它时 .modal-header 消失 background.Here 是 jsfiddle

我知道我可以通过在 .errorAlert .modal-header 中添加一个 border-radius:5px 5px 0px 0px 来解决它，但我想首先了解为什么会发生这种情况。

如果您在使用 link 时遇到问题，这里是重现该问题的最少代码：

HTML

<div class='btn btn-info' id = "simpleModal">
Show just a simple modal
</div>
<div class='btn btn-info' id="customClass">
Show a modal with a custom class
</div>

CSS:

.errorAlert .modal-header{
  background:red;
}

JavaScript:

$(function(){
  $("#simpleModal").on("click",function(){

    bootbox.alert({title:"Just a modal",message:"With no custom class"})
  })
  $("#customClass").on("click",function(){
    bootbox.alert({title:"Just a modal",message:"With .errorAlert class applied",className:"errorAlert"})
  })
})

Answer 1

这是因为 Bootstrap 中的边框半径应用于 .modal-content，默认情况下 .modal-header 没有背景。当您将背景应用于模态 header 时，边框半径消失，因为您用没有边框半径的模态 header 的红色背景覆盖了它们。

.modal-header 在应用新背景时丢失左上角和右上角半径

.modal-header loses top left and right radius when new background is applied

twitter-bootstrap-3

bootbox