Question

我正在尝试使用以下css代码更改twitter bootstrap的模态标题的背景颜色。

.modal-header
 {
     padding:9px 15px;
     border-bottom:1px solid #eee;
     background-color: #0480be;
 }
 .modal-header .close{margin-top:2px}
 .modal-header h3{margin:0;line-height:30px}

但是这段代码使得模态标题的角有角度。在使用上述代码之前，角落是圆形的。如何使用上述背景颜色获得模态标题的圆角？谢谢

Answer 1

你可以使用下面的css，将它放在你的自定义css中以覆盖bootstrap css。

.modal-header {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #0480be;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }

Answer 2

所以，我尝试了其他方法，但有一个非常轻微的刺激性，如果你保持模态内容边界半径，在FF和Chrome中，有一点点白色沿着边框显示修剪，即使您在模态标题边框半径上使用5px也是如此。（标准模态内容边界半径为6px，因此模态标题边框顶部半径上的5px覆盖了一些白色）。

我的解决方案：

.modal-body
{
    background-color: #FFFFFF;
}

.modal-content
{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: transparent;
}

.modal-footer
{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
}

.modal-header
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
}

<强> !! CAVEAT !!

然后必须设置模态标题，模态内容和模态页脚的背景颜色。这是不差的权衡，因为它允许你这样做：

<div class="modal-header bg-primary">

<div class="modal-body bgColorWhite">

<div class="modal-footer bg-info">

修改

甚至更好：

<div class="modal-header alert-primary">

Answer 3

角落实际上在.modal-content

所以你可以试试这个：

.modal-content {
  background-color: #0480be;
}
.modal-body {
  background-color: #fff;
}

如果更改页眉或页脚的颜色，则会绘制圆角。

Answer 4

我所需要的只是：

.modal-header{
     background-color:#0f0;
}
.modal-content {
    overflow:hidden;
}

overflow: hidden将颜色保留在border-radius

中

Answer 5

将此类添加到css文件中以覆盖引导类.modal-header

.modal-header {
   background:#0480be;
}

重要的尝试是永远不要编辑Bootstrap CSS，以便能够从repo更新并且不会丢失所做的更改或在期货发布中破坏某些内容。

Answer 6

我自己想知道如何改变模态标题的颜色。

在我解决这个问题的过程中，我试图遵循我对Bootstrap愿景的解释之路。我添加了标记类来告诉模态对话框的作用。

模态成功，模态信息，模态警告和模态错误告诉他们他们做了什么，你不会突然出现在每种情况下都无法使用的颜色如果你改变bootstrap中的一些模态类。 当然，如果您制作自己的主题，则应更改它们。

.modal-success {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0d8), to(#c8e5bc));
  background-image: -webkit-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: -moz-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: -o-linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-image: linear-gradient(#dff0d8 0%, #c8e5bc 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8',     endColorstr='#ffc8e5bc', GradientType=0);
  border-color: #b2dba1;
  border-radius: 6px 6px 0 0;
}

在我的解决方案中，我实际上只是在引导程序中复制了alert-success的样式，并添加了border-radius以保持圆角。

A plunk demonstration of my solution to this problem

Answer 7

派对有点晚了，但这是另一种解决方案。

只需将模态的类调整为像alert-danger这样的类就可以了，但它会删除模态的顶部圆角。

一种解决方法是为modal-header元素添加一个panel-heading的附加类，例如

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header panel-heading"> <!-- change here -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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>

然后，要更改标题颜色，您可以执行类似的操作（假设您使用的是jquery）

jQuery('.modal-content').addClass('panel-danger')

Answer 8

您可以通过将类添加到模式标题中来解决此问题

<div class="modal-header bg-primary text-white">

Answer 9

所有其他答案overflow:hidden，alert-danger在Bootstrap 4中对我不起作用但是我在Bootstrap 4中找到了一个简单的解决方案。由于白色边框来自模态内容，因此只需向其添加border-0类，白色边框就会消失。

示例： https://codepen.io/eric1214/pen/BajLwzE?editors=1010

更改twitter bootstrap模式的标题背景颜色

9 个答案: