twitter-bootstrap bootstrap 3 模态标题背景颜色

bootstrap 3 modal header background color

提问by VAAA

Hi I have a bootstrapmodal that I want to set its background-color:

嗨，我有一个bootstrap模态，我想设置它background-color：

But I get a white space on the top corners:

但是我在顶角有一个空白区域：

This is my style:

这是我的风格：

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

The border radius must be 6px and its what I have.

边框半径必须是 6px 和它我所拥有的。

Here is the code: https://codepen.io/anon/pen/xgGvoP

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

Any clue?

有什么线索吗？

采纳答案by Syden

Set border-radiuson .modal-headerto 3px. Considering it is inside of .modal-content, same radius wouldn't match.

设置border-radius上.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>

回答by Dhaval Jardosh

Found a great work done by a person His username is Oskar

发现一个人完成了一项伟大的工作 他的用户名是 Oskar

Saved a lot of my time. Please check this link,it can't be any better.

节省了我很多时间。请检查此链接，再好不过了。

All we will need to do is add the following classes:

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

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

Here is the link - Change background color of Modal-Header

这是链接 -更改模态标题的背景颜色

回答by Prasath V

border-radiusfor Parent element and modal box header was equal.

border-radius对于父元素和模态框标题是相等的。

If you increasing the border-radiusmeans it will shows the background color of .modal-contentclass of modal box.

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

So you have to increase the border-radiusof .modal-content3px larger than modal-header

所以，你必须增加border-radius的.modal-content3px的量比较大modal-header

Ex:

前任：

.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 {
border-radius: 9px;
padding: 0;
}

回答by Aikansh Mann

bg-success bg-primary bg-info bg-warning bg-dangeruse one of these class with modal-header

bg-success bg-primary bg-info bg-warning bg-danger使用这些类之一 modal-header