引导3模态头背景色

Question

嗨，我有一个bootstrap模式，我想设置它的background-color

​

​

但我在顶角有一个空白：

​

​

这是我的风格：

.modal.modal-alert .modal-dialog .modal-content {
  border-radius: 6px;
  padding: 0;
}
.modal.modal-alert .modal-dialog .modal-content .modal-header {
   padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}
.modal.modal-alert .modal-dialog .modal-content .modal-body {
  padding: 10px 0;
}
.modal.modal-alert .modal-dialog .modal-content .modal-footer {
  padding-top: 15px;
}

边界半径必须是6px，这就是我所拥有的。

下面是代码：https://codepen.io/anon/pen/xgGvoP

有线索吗？

Answer 1

将border-radius on .modal-header设置为3px。考虑到它在.modal-content内部，相同的半径是不匹配的。

​

.modal.modal-alert .modal-dialog .modal-content {
  border-radius: 6px;
  padding: 0;
}
.modal.modal-alert .modal-dialog .modal-content .modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
  background-color: #0480be;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.modal.modal-alert .modal-dialog .modal-content .modal-body {
  padding: 10px 0;
}
.modal.modal-alert .modal-dialog .modal-content .modal-footer {
  padding-top: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>

<div class="container">
  <div class="row text-center">
    <h3></h3>
    <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
  </div>
  <hr>
</div>
<div class="modal modal-alert fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </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>

​

Answer 2

发现一个人完成了一件伟大的工作，他的用户名是奥斯卡

节省了我很多时间。请检查这个链接，它不会更好。

我们所需要做的就是添加以下类：

modal-header modal-header-primary
modal-header modal-header-default
modal-header modal-header-success
modal-header modal-header-warning
modal-header modal-header-danger

下面是链接- 更改模板标头的背景色

Answer 3

bg-success bg-primary bg-info bg-warning bg-danger与modal-header一起使用这些类中的一个