javascript - 如何从 Bootstrap 调整模态大小

Question

我不熟悉 Bootstrap 的模态弹出窗口。我目前在这里使用来自 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>