0

Есть модальное окно в котором находятся текстбоксы в 2 столбца и в первом столбце под текстбоксами есть изображение. Но оно почему то сдвигается немного провее относительно всех текстбоксов. Как сделать так что бы оно начиналось на одном уровне со всеми текстбоксами в своём столбце.

<div class="container">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="row">
                                <div class="col">
                                    @Html.Label("Автомобиль:")
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Price, "Цена")
                                        @Html.EditorFor(i => i.Price, new { htmlAttributes = new { @id = "txtPrice", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Count, "Количество на складе")
                                        @Html.EditorFor(i => i.Count, new { htmlAttributes = new { @id = "txtCount", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Mark.MarkName, "Марка")
                                        @Html.EditorFor(i => i.Mark.MarkName, new { htmlAttributes = new { @id = "txtMarkName", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.CarModel.ModelName, "Модель")
                                        @Html.EditorFor(i => i.CarModel.ModelName, new { htmlAttributes = new { @id = "txtModelName", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        <br />
                                        @Html.LabelFor(i => i.Equipment.Picture, "Изображение Автомобиля", new { @style = "padding-right: 50px" })
                                        <input id="btnAddPicture" type="button" value="Обзор" class="btn btn-secondary" />
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        <img id="autoPicture" class="col-sm-10" src="~/Content/auto.jpg" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col">
                                    @Html.Label("Комплектация:")
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Engine, "Двигатель")
                                        @Html.EditorFor(i => i.Equipment.Engine, new { htmlAttributes = new { @id = "txtEngine", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Power, "Мощность")
                                        @Html.EditorFor(i => i.Equipment.Power, new { htmlAttributes = new { @id = "txtPower", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.ReleaseYear, "Год выпуска")
                                        @Html.EditorFor(i => i.Equipment.ReleaseYear, new { htmlAttributes = new { @id = "txtYear", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.DriveType, "Тип привода")
                                        @Html.EditorFor(i => i.Equipment.DriveType, new { htmlAttributes = new { @id = "txtDriveType", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Transmission, "КПП")
                                        @Html.EditorFor(i => i.Equipment.Transmission, new { htmlAttributes = new { @id = "txtTransmission", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Body, "Кузов")
                                        @Html.EditorFor(i => i.Equipment.Body, new { htmlAttributes = new { @id = "txtBody", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.MaxSpeed, "Максимальная скорость")
                                        @Html.EditorFor(i => i.Equipment.MaxSpeed, new { htmlAttributes = new { @id = "txtMaxSpeed", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Weight, "Вес")
                                        @Html.EditorFor(i => i.Equipment.Weight, new { htmlAttributes = new { @id = "txtWeight", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.MaxFuelVolume, "Бак")
                                        @Html.EditorFor(i => i.Equipment.MaxFuelVolume, new { htmlAttributes = new { @id = "txtFuel", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        @Html.LabelFor(i => i.Equipment.Color, "Цвет")
                                        @Html.EditorFor(i => i.Equipment.Color, new { htmlAttributes = new { @id = "txtColor", @class = "form-control" } })
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Скриншот: введите сюда описание изображения

15
  • Я не совсем понимаю что вы хотите сделать, можете детальнее обяснить вашу проблему, в начале у вас была проблема с картинкой которую сдвигало вправо.
    – IvanTokar
    Commented 21 янв. 2019 в 20:55
  • @IvanTokar не картинку сдвигало. А текст темы сдвигало в лево когда я убирал содержимое img. Я хочу сделать слево картинку высотой в несколько строк. А справо что бы было несколько тексбоксов на против этой картинки. А у меня получается что на против картинки только 1 текстбокс не важно какой ширины а все последующие идут уже ниже картинки. Commented 21 янв. 2019 в 21:22
  • @IvanTokar всё хорошо сделал по вашему примеру, но теперь снова проблема с небольшим отступом картинки от левого края. Я смог её убрать только с помощью если убирал у img class и сам назначал размеры в style, а вот так по нормальному не получается. Я подредактирую вопрос, вставлю последний вариант кода и скриншот. Commented 22 янв. 2019 в 6:19
  • @IvanTokar по сути вопрос вернулся к своему изначальному состоянию) Как сможете поглядите пожалуйста. Commented 22 янв. 2019 в 6:21
  • @IvanTokar я подозреваю что дело в том что у img есть свой собственный col-sm но если его не ставить то картинка становиться огромной и уходит даже за экран. Commented 22 янв. 2019 в 6:25

2 ответа 2

1

Я привел пример внизу как нужно разбить на две колонки ваше модальное окно, обратите внимание что я использовал .container-fluid, в отличие от .container он занимает 100% места по горизонтали, а не адаптируется в зависимости от media queries. Картинки тоже нужно адаптировать и в Bootstrap для этого также есть инструменты.

.test {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="test">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">

        <div class="row">
          <div class="col">
            img
          </div>
        </div>

      </div>
      <div class="col-sm-6">

        <div class="row">
          <div class="col">
            text field 1
          </div>
        </div>
        <div class="row">
          <div class="col">
            text field 2
          </div>
        </div>
        <div class="row">
          <div class="col">
            text field 3
          </div>
        </div>
        <div class="row">
          <div class="col">
            text field 4
          </div>
        </div>

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

1
  • Ivan спасибо хороший пример. Commented 22 янв. 2019 в 5:35
0

Поместите его к остальным col-sm-5 в контейнер <div class="row">, он в него не входит по судя по вашему коду, или поместите в отдельный row

6
  • Ivan пробовал в отдельный row тот же результат. Там все строки если что каждая в своём row. Commented 21 янв. 2019 в 12:45
  • Ivan попробовал сделать ещё 1 row и добавит туда свою картинку, с остальными текстбоксами которые должны идти в правом ряду. И вроде бы всё нормально и всё сдвинулось как нужно, но есть 1 нюанс. Если картинка есть, и у текстбоксов которые должны быть справа есть offset тога все текстбоксы уходят ниже картинки, а вот если убрать offset тогда с картинкой всё нормально, но тогда проблема если картинки нет, как эт оможно исправить? Код и скрины привожу в конце вопроса. Commented 21 янв. 2019 в 12:53
  • Ivan я добавил данные в вопрос и дописал формулировку, посдкажите пожалуйста если можете. Commented 21 янв. 2019 в 12:58
  • Разделите на две колонки ваш шаблон, а внутрь каждой положить то что нужно и ничего у вас не будет сьезжать, пример: row внитри два col-sm-*, а вних каждого по одному row и colы, у вас есть возможность влаживать row>col>row>col ... почитайте в документации по Bootstrap о гридах Grid system
    – IvanTokar
    Commented 21 янв. 2019 в 13:43
  • Ivan решил последовать вашему совету и потренироваться на codepen. Скинул скрин в конце вопроса. Создал несколько row а внутри них col'ы. Сделал как мне нужно для своего примера высокий col внутри row на половину строки. Но не как не могу добавить несколько узких строчке на вторую половину. Как мне это сделать? Всё что я запихиваю внутрь row где уже лежит высокий col становиться тоже высоким на второй половине. Commented 21 янв. 2019 в 19:08

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.