Поместите помощник HTML рядом с меткой - PullRequest
Новая
       15

Поместите помощник HTML рядом с меткой

0 голосов
/ 05 июня 2019

Я ничего не знаю, когда дело доходит до HTML. У меня есть страница с метками, текстовыми полями и Dropbox. У меня есть этот код 

<div class="col-xl-4 col-lg-6">
    <label for="JobLineJob_StatusId">Status:</label>
    @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")
</div>

Когда я перехожу на мою страницу, имеет этот макет (я не могу поместить изображения, потому что мне не хватает точек в соответствии с переполнением стека)

Статус:

(выпадающий список)

Я не хочу, чтобы выпадающий список попадал под метку. Я хочу, чтобы он находился справа от метки и соответствовал ей следующим образом.

Статус: (раскрывающийся список)

Я пытался написать код, подобный этому 

<div class="col-xl-4 col-lg-6">
    <label for="JobLineJob_StatusId">Status: @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")</label>                        
</div>

и я попробовал еще несколько вещей, но все, что не привело к ошибке, дало мне ту же компоновку, что и исходный код. Я также не знаю о css, поэтому понятия не имею, как с этим справиться.

1 Ответ

0 голосов
/ 05 июня 2019

Поскольку похоже, что вы используете Bootstrap, я бы просто добавил еще одну строку / столбцы внутри вашего текущего столбца.

Это выглядело бы примерно так: 

<div class="col-xl-4 col-lg-6">
    <div class="row">
        <div class="col-sm-6">
            <label for="JobLineJob_StatusId">Status:</label>
        </div>
        <div class="col-sm-6">
            @Html.DropDownListFor(model => model.JobLineJob.StatusId, Model.JobLineStatusList, "-- Select One --")
        </div>
    </div>
</div>

Этот подход должентакже хорошо работают для отзывчивых ... 2 колонки будут складываться на мобильных устройствах, если вы не хотите этого, измените их на col-xs-6 каждый

...