使用Bootstrap的模型，.modal頭文件和.modal頁腳不起作用

Question

我正在使用Bootstrap 3.3.5。

我有一個.modal與標題，身體和頁腳。

根據Bootstrap Model's example，我應該使用類別.modal-header,.modal-body和.modal-footer爲模態的每個部分。

我使用的是推薦的類，但沒有樣式應用於使用.modal-header和.modal-footer註釋的div。

我甚至手動編寫了樣式，仍然沒有應用。

這裏發生了什麼？

.modal-header { 
 
    min-height: 16.43px; 
 
    padding: 15px; 
 
    border-bottom: 1px solid #E5E5E5; 
 
} 
 
.modal-footer { 
 
    padding: 15px; 
 
    text-align: right; 
 
    border-top: 1px solid #E5E5E5; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="modal" style="display:block;"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="model-header"> 
 
     <button type="button" class="close"></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     This is the body 
 
     </div> 
 
     <div class="model-footer"> 
 
     <button type="button" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您的HTML一個錯字，這是國防部一個升頭和MOD 一個升尺不國防部Ë升頭和MOD Ë 1-頁腳。

.modal-header { 
 
    min-height: 16.43px; 
 
    padding: 15px; 
 
    border-bottom: 1px solid #E5E5E5; 
 
} 
 
.modal-footer { 
 
    padding: 15px; 
 
    text-align: right; 
 
    border-top: 1px solid #E5E5E5; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="modal" style="display:block;"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close"></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     This is the body 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>