ブートストラップからモーダルのサイズを変更するには

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>