在Bootstrap布局中包装ASP表单

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％