установка фрейма в столбцы

Question

У меня есть 2 столбца, столбец слева содержит форму, а столбец справа содержит фрейм, который показывает файл PDF. Мне нужно, чтобы PDF-файл был как можно ближе к левому столбцу, чтобы разместить их на странице, хотя, независимо от того, какие размеры столбцов я использую, левый столбец выглядит как правый столбец. Может кто-нибудь дать мне решение получить оба столбца рядом?

представление редактирования:

<div class="container">
    <div class="row">
        <div class="col-md-10" >

            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">
                    <h4>SecondarySchoolSurvey</h4>
                    <br />

                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    @Html.HiddenFor(model => model.Id)

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q1, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Q1, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Q1, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.RollNumber, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.RollNumber, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.RollNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.OfficialSchoolName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.OfficialSchoolName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.OfficialSchoolName, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.CampDate, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.CampDate, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.CampDate, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.SurveyFileName, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.SurveyFileName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.SurveyFileName, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.FilePage, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.FilePage, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.FilePage, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q2, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EnumDropDownListFor(model => model.Q2, htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Q2, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q3, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Q3, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Q3, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q4, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Q4, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Q4, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q5, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Q5, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Q5, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Q6a, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.EnumDropDownListFor(model => model.Q6a, htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Q6a, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Save" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            }
        </div>


        <div class="col-md-2" >
            <br />
            <br />
            <br />

            <iframe width="700" height="800" src="@Url.Action("OpenPDF", new { id = 8 })"></iframe>

        </div>
        </div>
    </div>

это то, как они выглядят в настоящее время (если я уменьшу размер левого столбца чем 10, то метки начинают уменьшаться):

Когда я пробую оба столбца как col-md-6, это то, что я получаю (если я сделайте размер левого столбца меньше 10, чтобы метки начали уменьшаться, как вы можете видеть). Я не уверен, что вызывает пустое пространство между двумя столбцами:

Answer 1

Вам нужно разделить метку в другом столбце. Дайте метке достаточно места и уменьшите ширину первого столбца в двух основных столбцах (например, 6 для формы и 6 для контейнера PDF). например,

<div class="form-group">
    <div class="row">
        <div class="col-md-6" >
                        @Html.LabelFor(model => model.Q1, htmlAttributes: new { @class = "control-label col-md-2" })
        </div>
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.Q1, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Q1, "", new { @class = "text-danger" })
                        </div>
                    </div>
</div>