Bootstrap modal - Elemente nicht innerhalb modal Körper

Question

I modalen Dialog haben (öffnet mit der Taste drücken), die mich zeigt dies:

Ich verstehe nicht, warum diese Eingaben außerhalb des modalen Dialog sind ?

Beispiel ist here

Code:

<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

Ihr Beispiel und Link nicht denselben Code enthalten. Code hier fehlt Form-Gruppen und Modal-Body-Stile. Der Link sollte funktionieren - es zieht nur die falsche ID (#myModal). Ändern Sie das Datenziel in #modalOffer und es funktioniert.

<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>