Увеличить размер загрузочного бокса (ASP.NET MVC)

Ответ 1

Альтернативный способ сделать это - просто изменить класс col-md-x в div, который обертывает ваше текстовое поле и сообщение проверки на нужную ширину.

Например, измените это:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

И теперь ваше текстовое поле будет шириной в 5 столбцов вместо 10. Это не требует дополнительных классов, и дополнительный бонус - это то, что если у вас есть более длинное сообщение проверки, оно будет охватывать те же места, что и ваше текстовое поле.

Ответ 2

Все ответы были полезными.

Мое решение состояло в том, чтобы изменить максимальную ширину по умолчанию в моем CSS, потому что она ограничивала размер

input, select, textarea {
    max-width: 500px;
}

Затем изменился класс col-md- *.

спасибо

Ответ 3

Я бы добавил класс в текстовое поле:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Затем создайте его в своем CSS:

.long-textbox{
    width:300px;
}

Вы можете использовать атрибут size, но я считаю, что это скорее стилистическая вещь, и ее нужно управлять в CSS.

Ответ 4

обычно ваш тэг имеет максимальное поле ширины. Если вы измените его как

text {
    max-width: 100%;
    width: 100%;
}

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

Ответ 5

В Bootstrap 3 класс form-control устанавливает input элементы на 100% от контейнера.

В качестве альтернативы вы можете вручную применить свой собственный стиль:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

С CSS следующим образом:

input.wide-control {
    width: 300px;
}

Ответ 6

Используйте свойство HTML INPUT "Размер".

Пример:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" })
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" })

Ответ 7

Вы можете использовать текстовое поле и использовать атрибут style вместе с ключевым словом new, как показано ниже ниже.

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

Он также может использоваться для LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" }) 

Ответ 8

Я всегда стараюсь держаться подальше от изменения размера, я позволяю вещам заполнить пространство и использую Grid System.

Это помогает работать на экранах любого размера.

Благодаря

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2">Wide</label>
    <div class="col-md-10">
      <input class="**form-control**"  type="TextBox"/>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2">Not as Wide</label>
    <div class="col-md-8">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Narrow</label>
    <div class="col-md-6">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

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

Ответ 9

Как кто-то упомянул, поместите размер в поле ввода самого текста. Не нужно создавать новый класс для обработки ширины.

<div class="col-md-10">
...
   @Html.TextBoxFor(model => model.Name, new { @class = "form-control col-md-10" })
...
</div>

Ответ 10

ЛУЧШЕЕ РЕШЕНИЕ

в проекте MVC С# перейдите по ссылке: Папка с содержимым> site.css

И изменить максимальную ширину в стиле CSS для ввода выберите текстовое поле

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

**ЭТО БУДЕТ РАБОТАТЬ **