Обтекание формы ASP внутри Bootstrap Layout

Question

Я построил форму в HTML 5, которая находится в модальном окне и обернута в Bootstrap, и макет идеален. У меня есть необходимость использовать другое модальное окно, однако вместо формы, которая создается в HTML 5, мне нужно разместить и iframe в модальной форме и в форме отображения и asp. Я завернул все в 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>

ИЗОБРАЖЕНИЕ ДЛЯ ИДЕАЛЬНОГО ПЛАНА

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

Мне кажется, вам нужно установить ширину для фрейма, потому что модальный размер не меняется. Попробуйте установить ширину в 100% для iframe