bootstrap 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

有什么线索吗？

原文由 VAAA 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Syden 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有同样的问题，我刚刚添加了这个 CSS 并修复了 margin-right: -1px;

原文由 RFOoD x MoDz 发布，翻译遵循 CC BY-SA 4.0 许可协议