ブートストラップ3モーダルヘッダーの背景色

Question

こんにちは、私は私が設定したい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

どれ手がかり：ここ

は、コードのですか？

Answer 1

border-radiusを.modal-headerからに設定します。それが.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>

Answer 2

border-radius等しかったです。

border-radiusを増やすと、.modal-contentモーダルボックスのクラスの背景色が表示されます。

ですから、modal-header

例よりもborder-radius 3px .modal-contentの大きな増加する必要があります。人によって行わ偉大な仕事は 彼の名はオスカー

をたくさん保存されますが見つかり

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

Answer 3

を私の時間。 このリンクを確認してください。それ以上はできません。 - Change background color of Modal-Header

ここ

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 

がリンクである：

私たちが行う必要がありますすべては、以下のクラスを追加しています