bootstrap 3模态标题背景颜色

Question

您好我有Number模式，我想设置bootstrap：

但我在顶角有一个白色空间：

这是我的风格：

background-color

边界半径必须是6px及其我所拥有的。

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

  

有任何线索吗？

Answer 1

找到一个人完成的伟大工作 他的用户名是Oskar

节省了我很多时间。 请检查此链接，它可以更好。

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

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

以下是链接 - Change background color of Modal-Header

Answer 2

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

对于父元素和模态框标题，

border-radius是相等的。

如果你增加border-radius意味着它会显示.modal-content类模态框的背景颜色。

所以你必须增加border-radius大于.modal-content的{​​{1}} 3px

例如：

modal-header

Answer 4

  

bg-success bg-primary bg-info bg-warning bg-danger   与以下类一起使用   modal-header

Answer 5

我有同样的问题，我刚刚添加了这个 CSS 并修复了 右边距：-1px;