代码之家 › 专栏 › 技术社区 › Alan

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

html-helper asp.net-mvc-5 razor css html

Alan · 技术社区 · 10 年前

VS2013、MVC5、Razor、VB

我还不太熟悉CSS文件,所以这可能是我学习的机会,但我也认为我应该能够向html.EditorFor命令添加一些东西,以使显示的框更宽。

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

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

当我添加如下.rows时(我有“DataType(DataType.MultineText)”修饰类属性“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模板广泛使用了引导CSS文件,我有点不愿意对它们做太多,但也许有些答案是指导我安全地或根据最佳实践进行此类更改。

我还有一个问题,为什么我不能在html.EditorFor命令中进行本地样式更改。我认为原则是越接近显示的元素,CSS的优先级就越高。

增加了Chris Pratt的回复: 这是脚手架创建的标准Razor代码。我只包含了我的观点中的一个元素。我看到了更改元素内部的类是如何产生影响的,但我最终还是更改了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。

1 回复 | 直到 10 年前

Chris Pratt 10 年前

两件事。第一 cols 如果未设置显式宽度,则仅影响文本区域的宽度。默认Site.css文件确实设置了输入、文本区域和选择的最大宽度:

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

因此,无论添加多少列,文本区域都不会扩展到280px以上。

第二,如果你要使用Bootstrap,那么无论如何这都不是你应该控制宽度的方式。你的输入应该是 form-control ,这实际上会导致它们扩展到100%宽度。然后,通过将它们包装在bootstrap提供的响应网格类中来限制这一点。例如:

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