css - 在 Bootstrap 布局中包装 ASP 表单

Question

我用 HTML 5 构建了一个表单，它位于模态窗口中并包装在 Bootstrap 中，布局非常完美。我需要使用另一个模态窗口，但是我需要在模态和显示以及 asp 表单中放置和 iframe，而不是在 HTML 5 中构建的表单。我在 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%