Bootstrap输入控制表单

时间:2016-10-10 21:38:59

标签: css twitter-bootstrap-3

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

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

显示视图

enter image description here

查看

@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");}
}

1 个答案:

答案 0 :(得分:0)

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

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

此外,您可以覆盖最大宽度:

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