我无法在辅助方法中调整 html.EditorFor 框的宽度

Question

VS2013、MVC5、剃刀，VB

我对 CSS 文件还不是很熟练，所以也许这是我学习的机会，但我也认为我应该能够在 html.EditorFor 命令中添加一些东西来使显示框变宽。

这是我在脚手架上的原始代码：

@Html.EditorFor(Function(model) model.Body, New With { .htmlAttributes = New With { .class = "form-control" } })

当我如下添加 .rows 时（我有 "DataType(DataType.MultilineText)" 装饰 class 属性 'Body'）：

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20"}})

这很有效，可以轻松地为我提供更多行。但是添加 .cols 似乎不起作用：

@Html.EditorFor(Function(model) model.Body, New With {.htmlAttributes = New With {.class = "form-control", .rows = "20", .cols = "80"}})

事实上，即使我设置 .cols = "10"，我也看不到视图有任何变化。我在浏览器中检查了源代码，并且存在 cols 属性。我改成 html.TextBoxFor 来玩，发现我可以把盒子的宽度调小一些，但是我不能超过最大宽度。我不喜欢使用 .TextBoxFor，因为它显示效果不如原来的好。

由于 MVC 模板广泛使用 bootstrap CSS 文件，我有点不愿意对它们做太多，但也许一些答案会指导我制作安全地或根据最佳实践进行此类更改。

我也有一个问题，为什么我不能在html.EditorFor命令中进行局部样式更改。我以为原则是越靠近显示的元素，CSS的优先级就越高。

添加了 Chris Pratt 的回复： 所以这是由脚手架创建的标准 Razor 代码。我只包含了我的观点的一个元素。我看到了改变元素内部的 class 是如何产生影响的，但我最终改变了 Label 元素以及 .EditorFor 元素，另外，我从来没有让 .EditorFor 元素变得更宽。

@Using (Html.BeginForm())
@Html.AntiForgeryToken()
@Html.Hidden("ChannelItemID", ViewData("ChannelItemID"))

@<div class="form-horizontal">
  <hr />

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

我想知道您是否可以提供我应该更改的内容以获得 100% 的宽度，同时仍然正确使用 Bootstrap。

Answer 1

两件事。首先，如果没有设置明确的宽度，cols 只会影响文本区域的宽度。默认 Site.css 文件确实在输入、文本区域和选择上设置了最大宽度：

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

因此，无论添加多少列，textarea 都不会超过 280px。

其次，如果您打算使用 Bootstrap，那么这无论如何都不是您控制宽度的方式。您的输入应该被赋予 class form-control，这实际上会使它们扩展到 100% 宽度。然后，您可以通过将它们包装在 classes bootstrap 提供的响应网格中来限制这一点。例如：

<div class="col-md-4">
    <textarea class="form-control"></textarea>
</div>

我无法在辅助方法中调整 html.EditorFor 框的宽度

I can't adjust the width of my html.EditorFor box within the helper method

html

css

html-helper

razor

asp.net-mvc-5