Question

VS2013，MVC5，Razor，VB

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

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

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

当我添加.rows如下（我有“DataType（DataType.MultilineText）”装饰类属性'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代码。我只包含了我观点的一个元素。我看到如何更改元素中的类有影响，但我最终更改了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仅影响textarea的宽度。默认的Site.css文件确实在输入，textareas上设置了最大宽度并选择：

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

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

其次，如果你要使用Bootstrap，那么你不应该如何控制宽度。您的输入应该是类form-control，这实际上会使它们扩展到100％宽度。然后，通过将它们包装在bootstrap提供的响应式网格类中来限制它。例如：

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

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

1 个答案: