bootstrap 3 模态标题背景颜色答案

【问题标题】：bootstrap 3 modal header background colorbootstrap 3 模态标题背景颜色
【发布时间】：2021-06-14 14:08:35
【问题描述】：

您好，我有一个 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

有什么线索吗？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

所以你必须将.modal-content的border-radius比modal-header大3px

例如：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：