ブートストラップモーダル - モーダル体内の要素ではない

Question

私は私にこれを見せているモーダルダイアログ（ボタンを押すと開きます）を持つ：モーダルダイアログの外の入力がある理由

が、私は理解していません？

<style> 
    #myModal .modal-dialog { width: 95%; } 
</style> 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 

     <input type="text" class="col-sm-8"> 

     <label class="col-sm-4">Datum ponudbe:</label> 
     <input type="text" class="col-sm-8"> 

     <label class="col-sm-4">Dokument velja do:</label> 
     <input type="text" class="col-sm-8"> 


    </div> 
    </div> 
     </div> 

    </div> 

    </div> 
</div> 

Answer 1

あなたの例と同じコードのリンクが含まれていない：

例はhere

コードです。ここのコードには、フォームグループとモーダルボディスタイルがありません。 リンクが正常に動作するはずです。間違ったID（＃myModal）を取得するだけです。データターゲットを#modalOfferに変更すると動作します。

<style> 
#myModal .modal-dialog { width: 95%; } 
</style> 

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalOffer">Open Modal</button> 

<!-- Modal --> 
<div id="modalOffer" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 

<!-- Modal content--> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal">&times; 
</button> 
    <h4 class="modal-title">Modal Header</h4> 
    </div> 
    <div class="modal-body" style="overflow:hidden;height:1%;"> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Kraj:</label> 
    <input type="text" class="col-sm-3"> 
    </div> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Datum ponudbe:</label> 
    <input id="inputDateOffer" type="text" class="col-sm-3"> 
    </div> 

    <div class="form-group col-sm-12"> 
    <label class="col-sm-2">Dokument velja do:</label> 
    <input id="inputDokumentValidTo" type="text" class="col-sm-3"> 
    </div> 


</div> 
</div> 
    </div> 

</div> 

</div> 
</div>