Question

我有一个模式，如下所示。

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title"><b>Outage Details</b></h4>
        </div>

我尝试使用给定的CSS

更改模态标题的背景颜色

.modal-header
{
    background-color : #0063C3
}

它工作正常，但颜色没有完全填充到边缘。您可以在边缘看到白色。以下屏幕截图供参考。我们如何用背景颜色完全填充模态标题。

enter image description here

Answer 1

您正在寻找rounded-0实用程序类来删除圆角..

   <div class="modal-header rounded-0">
         <h4 class="modal-title"><b>Outage Details</b></h4>
   </div>

演示：https://www.codeply.com/go/XHvAXID48s

Answer 2

这可能是border-radius的结果。请尝试删除border-radius，如此

.modal-header
{
    background-color : #0063C3;
    border-radius:0!important;
}

背景颜色有圆角

2 个答案: