html - 宽度不适用于文本区域 MVC

Question

文本区域控件的宽度不是设置。它为其他控件设置。有人能告诉我为什么宽度不适用于文本区域

例如

为 col-md-6 设置边框为实线

 <div class="form-group">
                @Html.LabelFor(model => model.ProjectName, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-6">
                    @Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { @class = "form-control", style = "width:100%" } })
                    @Html.ValidationMessageFor(model => model.ProjectName, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                @Html.LabelFor(model => model.ProjectSummary, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-6">
                    @Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { @class = "form-control", rows = "3", style = "max-width:100%" } })
                    @Html.ValidationMessageFor(model => model.ProjectSummary, "", new { @class = "text-danger" })
                </div>
            </div>

Answer 1

真实 宽度是文本区域的宽度。 col-md-6 将使它变得那么宽。问题是您应用边框的容器实际上并没有约束文本区域。如果我理解正确，您正在使用 col-md-6 类将边框应用于 div，那很可能是您的问题。 Boostrap 的网格类使用各种宽度、边距和填充设置来构建尽可能接近跨浏览器的网格，并将实际可见的样式应用于它们几乎总是导致这样的怪异。相反，用另一个 div 包裹你的 textarea 并应用边框:

<div class="col-md-6">
    <div class="my-awesome-border">
        @Html.TextAreaFor(model => model.ProjectSummary, new { htmlAttributes = new { @class = "form-control", rows = "3", style = "max-width:100%" } })
        @Html.ValidationMessageFor(model => model.ProjectSummary, "", new { @class = "text-danger" })
    </div>
</div>

总而言之，您应该始终避免使用 Bootstrap 的网格类(col-*、row 等)向任何内容添加额外的样式。