Javascript 如何从引导调整模式大小

我是新的模态弹出从引导。我现在使用的是w3schools示例中的一个模式。我想在模式中插入输入表单。因此，当用户单击上载文件按钮时，将弹出此模式。照片如下：

---

如您所见，我的问题是输入字段没有组织，我只想调整模式大小，以便输入字段能够适应。如何实现这一点？我们将非常感谢你的帮助。这是我的密码：

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

&时代；
上载新文件
文件名：
文件：
文件说明：
接近

请检查这是否有助于您：

小模态

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

大模态
以下是一个例子：
小模态
开放小模态
&时代；
模态头
这是一个小模型

接近

-可能是按钮周围的div导致了问题；此外，您还可以使用

.modal lg

类进行更大的模态-上面的注释可能是您正在寻找的，但您也可以做的是

，为了确保内部元素正确显示，请使用

填充

@hanseffranz great，它确实有效，我会调整按钮谢谢你很乐意帮忙但我的解决方案不是很好。你应该寻找一个反应迅速的解决方案。尝试使用“%”而不是“px”，或者更好地搜索像@Morpheus这样的引导解决方案。