Wie Modal von Bootstrap zu ändern

Question

Ich bin neu zu modalen Pop-up aus dem Bootstrap. Ich verwende derzeit ein Modal aus den Beispielen auf w3schools. Ich möchte mein Eingabeformular in das Modal einfügen. Wenn der Benutzer also auf die Schaltfläche Datei hochladen klickt, wird dieses modale Popup angezeigt. Hier ist das Foto: (Please take a look at this image)

---

Wie Sie sehen können, mein Problem hier ist die Eingabefelder unorganisiert sind, ich habe gerade wollen die modal, um die Größe, so dass die Eingabefelder passen würde in Wie kann ich erreichen, dass. ? Ihre Hilfe wird sehr geschätzt. Hier ist mein Code:

<!-- ******** LOG IN MODAL START ******** --> 
<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 

    <div class="modal-header" style="background-color: #003399;"> 
     <button type="button" class="close" data-dismiss="modal" style="color: 
     #fff;">&times;</button> 
     <h4 class="modal-title" style="color: #fff;">Upload New File</h4> 
    </div> 

    <div class="modal-body"> 
    <div class="form-horizontal"> 
     <form class="form-horizontal" action="uploadfile.php" method="post" 
     name="addservice" enctype="multipart/form-data" align="center" 
     onsubmit="return validateForm()"> 
    <div class="form-group"> 

     <div class="form-group"> 
      <label for="filename" class="col-sm-2 control-label">File Name: 
      </label> 
      <div class="col-sm-4"><input type="text" class="form-control" 
      name="filename" id="filename" placeholder="Name of the file" 
      maxlength="55" tabindex="1" required></div> 
     <!-- </div> 

     <div class="form-group"> --> 
      <label for="file" class="col-sm-2">File:</label> 
      <div class="col-sm-4"><input type="file" maxlength="11" 
      name="file" id="file" class="form-control" tabindex="2" 
      required></div> 
     </div> 

     <div class="form-group"> 
      <label for="filedesc" class="col-sm-2">File Description:</label> 
      <div class="col-sm-4"><textarea class="form-control" rows="3" 
      name=" filedesc" id="filedesc" placeholder="(maximum of 75 
      characters)" style="resize: none;" maxlength="75" tabindex="3" 
      required></textarea></div> 
     </div> 


    </div> 

     <div class="col-sm-4"> 
      <div class="form-group"><input class="btn btn-success btn-lg col- 
      sm-4" name="submit" type="submit" value="Upload" tabindex="4"> 
      <input type="reset" class="btn btn-default btn-lg col-sm-4" 
      name="clear" value="Clear" tabindex="5"> 
      </div> 
     </div> 

     </form> 
    </div> 
    </div> <!-- modal body --> 

    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button> 
    </div> 

    </div> <!-- modal content --> 

</div> <!-- modal dialog --> 
</div> <!-- modal fade --> 
<!-- ******** LOG IN MODAL END ******** --> 

Answer 1

überprüfen Sie bitte, dass dies könnte Ihnen helfen:

Kleine Modal

<div class="modal-dialog modal-sm"> 

Large Modal 

    <div class="modal-dialog modal-lg"> 

here is the example: 




     <div class="container"> 
      <h2>Small Modal</h2> 
      <!-- Trigger the modal with a button --> 
     <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button> 

     <!-- Modal --> 


     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog modal-sm"> 
       <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"> 
        <p>This is a small modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div>