Как изменить ширину поля ввода с помощью начальной загрузки

Question

Я попытался несколько вещей, чтобы увеличить поле для отображения электронной почты.Как видите, он отрублен и выглядел бы лучше, если бы поле было длиннее.

Код, стоящий за ним, выглядит следующим образом:

<div class="row">
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
    </div>
  </div>    
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>
  </div>    
</div>

Я пытался изменить col-md-4 div на col-md-5 или 6 для div, я также пытался изменить col-xs-5 на большее число.

Не думаю, что мне нужно менять col-md-4 на большее число для лейбла.

Есть идеи, почему не появляются изменения, чтобы расширить поле электронной почты?На странице много места.

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

Как мне получить поле адреса электронной почты шире?

Обновление В соответствии с предлагаемым ответом @JustLearning, я попробовал это:

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 1

Я закончил, добавив это в site.css:

#step1Edit #EmailAddress{
    width:23em;
}

Затем в мой RegistrationStep1.cshtml я добавил это во внешний div:

<div class="form-horizontal" id="step1Edit">

И это работало сидентификатор электронной почты, без изменений:

<div class="col-xs-6 col-sm-6 col-lg-6">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-6 col-sm-6 col-md-auto col-lg-6">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
</div>

Answer 2

Вот что я делаю для элементов управления Kendo:

Сначала создайте класс CSS, чтобы установить ширину на 100%:

.width100 {
    width: 100%;
}

Затем добавьте его в элемент управления:

@Html.EditorFor(model => model.EmailAddress, 
    new { htmlAttributes = new { @class = "form-control width100", @required = "required" } })

Answer 3

Добавлена ​​ширина до 100%, чтобы решить эту проблему, как показано ниже ...

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 4

Col-xs-5 применяется только к очень маленьким экранам

Так что вы можете подключить другой класс экрана, например:

col-xs-5 col-sm-5 col-md-5 col-lg-5, это позаботится о экранах всех размеров.

Более того, вы можете уменьшить col-xs-5 для домашнего почтового индекса до col-xs-4 col-sm-4 col-md-4 col-lg-4

и увеличить свой адрес электронной почты до

col-xs-8 col-md-8 col-lg-8

Используйте описанный выше подход, чтобы выяснить, как должна выглядеть сетка.Также примените вышеуказанный подход в дочерней сетке, то есть:

    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
        @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
        @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>

Пример сетки начальной загрузки с использованием col-md классов:

Еще одна вещь, которую вы можете попробовать - это размер ввода: добавьте класс input-sm к элементам ввода, чтобы сделать их меньше и вместить больше текста