如何从引导程序调整模态

Question

我是从引导模式弹出的新模式。我目前在这里使用w3schools上的示例。我想在模态中插入我的输入表单。所以当用户点击上传文件按钮时，这个模式会弹出。这里是照片：(Please take a look at this image)

---

正如你看到的，我的问题在这里是输入字段无组织的，我只是要调整模式使输入字段将适合在我怎样才能做到这一点。 ？您的帮助将受到高度赞赏。这里是我的代码：

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

请检查这可能会帮助您：

小模态

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