Question

在我的ASP.NET MVC Core项目中，我无法增加表单内输入控件的宽度。我尝试将属性width=500px等添加到输入控件，但它始终显示输入控件的相同固定宽度，如下图所示。

注意：我使用的是最新的ASP.NET Core和VS2015版本，默认情况下安装了bootstrap 3。

显示视图：

查看：

@model myProj.Models.SystemEmail
<div class="row">
    <div class="col-sm-3">
        <a asp-controller="Home" asp-action="Index">Home</a>
        @await Component.InvokeAsync("LeftMenu")
    </div>
    <div class="col-md-9">
        <form asp-action="SysEmailEdit">
            <div class="form-horizontal">
                <hr />
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="SystemEmailId" />
                <div class="form-group">
                    <label asp-for="From" class="col-md-1 control-label"></label>
                    <div class="col-md-11">
                        <input asp-for="From" class="form-control" />
                        <span asp-validation-for="From" class="text-danger" />
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="EmailSubject" class="col-md-1 control-label"></label>
                    <div class="col-md-11">
                        <input asp-for="EmailSubject" class="form-control" width="500px" />
                        <span asp-validation-for="EmailSubject" class="text-danger" />
                    </div>
                </div>
                <div class="form-group">
                    <label asp-for="EmailBody" class="col-md-1 control-label"></label>
                    <div class="col-md-11">
                        <textarea asp-for="EmailBody" class="form-control"/>
                        <span asp-validation-for="EmailBody" class="text-danger" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-1 col-md-11">
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </div>
            </div>
        </form>
        <div>
            <a asp-action="SystemEmails">Back to List</a>
        </div>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

查看 /Content/site.css 。微软添加了这个，如果你删除，它修复：

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

此外，您可以覆盖最大宽度：

input,
select,
textarea {
    max-width: none;
}

Bootstrap输入控制表单

1 个答案: