0
我是從引導模式彈出的新模式。我目前在這裏使用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;">×</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 ******** -->
https://jsfiddle.net/rmoxdpmq/ - 大概'COL-SM-4按鈕周圍的div引起問題;另外,你可以使用'.modal-lg'類來實現更大的模式 - https://getbootstrap.com/javascript/#modals-sizes – Morpheus
上面的評論可能是你正在尋找的,但你也可以做的是' div class =「modal-dialog」style =「width:1000px;」>'並確保內部元素正確顯示使用'padding' – hansTheFranz
@hansTheFranz偉大的實際工作,我只需調整按鈕謝謝 –