如何从引导调整模态大小

Question

我是引导程序的模态弹出窗口的新手。我目前在这里使用来自 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 ******** -->

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>