asp-for 渲染输入字段太大答案

【问题标题】：asp-for renders input field too bigasp-for 渲染输入字段太大
【发布时间】：2018-01-26 09:23:41
【问题描述】：

是否有一些数据注释来调整输入字段的物理大小？此代码呈现太大的输入字段：

<input asp-for="@item.Quantity" />

将size="1" 放在那里也无济于事。

此代码按照我想要的方式呈现字段，但我没有得到验证：

<input name="item.Quantity" id="item.Quantity" value="@item.Quantity" size="1" />

我尝试过[MaxLength(3)] 和[Range(0,99)]，但没有帮助。

购物车项目的视图模型：

public class ViewModelShoppingCartItem
{
    public int Id { get; set; }
    public int ShoppingCartId { get; set; }
    public int ProductId { get; set; }
    public string ProductTitle { get; set; }
    public decimal ProductPrice { get; set; }
    [MaxLength(3)]
    public int Quantity { get; set; }
    public decimal LineSum => ProductPrice * Quantity;
}

【问题讨论】：

<input> 元素的外观和布局将由 CSS 而不是 ASP.NET 设置。使用浏览器的 Inspector 窗口查看如何更改输入的大小。我注意到size=""属性不是特定的，你应该使用CSS width属性来指定一个实际的宽度，例如。
我尝试添加class="col-xs-1"。这确实使这个领域变小了，但它搞砸了设计。现在输入字段呈现在 x (-)(+) 的左侧，<td> 内的空间不受影响，它保持与之前输入字段一样大。

标签： html forms asp.net-core-mvc data-annotations

【解决方案1】：

好吧，这很尴尬......

只需添加style="width:50px;" 就可以了...

还是谢谢！ :D

【讨论】：

不要那样做。了解您正在使用的工具。 ASP.NET Core 网站默认使用 Bootstrap。所以，要么使用 Bootstrap，要么用你更喜欢的东西替换它。就 Bootstrap 而言，col-xs-1 仅靠它自己是不够的。您需要一个 row 元素，并且可能需要一个整体 container/container-fluid 元素。有关详细信息，请参阅 Bootstrap 文档。