Question

我已经在HTML 5中构建了一个窗体，该窗体位于模式窗口中，并包裹在Bootstrap中，布局完美。我需要使用另一个模式窗口，但是要代替在HTML 5中构建表单，我需要在模式，显示和asp表单中放置和iframe。我已经将所有内容完全包装在Bootstrap中，但是由于某种原因，我的表单控件旁边的标签显示在顶部，而不是旁边。我很困惑，我玩CSS已经两天了，试图找出原因。有什么想法吗？

布局完美的HTML代码

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content" style="width:100%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Observation Form</h4>
            </div>
            <div class="modal-body">
                <form class="well form-horizontal" action=javascript:createNewObservation() method="post" id="observationForm">
                    <fieldset>
                        <!-- Form Name -->

                        <!-- Enter Building -->

                        <div class="form-group">
                            <label class="col-md-3 control-label">Building</label>
                            <div class="col-md-8 inputGroupContainer">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                    <select id="formBuilding" name="formBuilding" class="form-control selectpicker" required></select>
                                </div>
                            </div>
                        </div>

完美布局的图像

以模态显示的IFRAME中包装的ASP代码

 <form id="form1" runat="server" class="well form-horizontal">
    <fieldset>
        <legend>File Upload Form</legend>
        <div class="form-group">
            <label class="col-md-3 control-label">Choose File</label>
            <div class="col-md-8 inputGroupContainer">
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                    <asp:FileUpload class="form-control" ID="FileUpload1" runat="server" style="width:50%" />
                </div>
            </div>
        </div>
        <asp:HiddenField ID="site" runat="server" />
        <asp:HiddenField ID="dateobserved" runat="server" />
        <asp:HiddenField ID="guid" runat="server" />
        <asp:HiddenField ID="username" runat="server" />
        <asp:Button class="btn btn-primary pull-right" ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
    </fieldset>
</form>

布局不正确的图像

Answer 1

在我看来，您似乎需要为iframe设置宽度，因为模态尺寸没有变化。尝试将iframe的宽度设置为100％

在Bootstrap布局中包装ASP表单

1 个答案: