css - Bootstrap "required"类不适用于当前 MVC web 应用程序

Question

我目前正在使用 MVC 网络应用程序。我进去重新设计了创建模板，这样做之后，我失去了用红色星号标记必填字段的能力。我不明白为什么我的代码不再有效。请帮忙。代码如下:

HTML/Razor 语法

<div class="form-group required col-md-4">
     @Html.LabelFor(model => model.Buy1FirstName)
     @Html.EditorFor(model => model.Buy1FirstName, new { htmlAttributes = new { @class = "form-control", required = "required" } })
     @Html.ValidationMessageFor(model => model.Buy1FirstName, "Please enter a valid first name", new { @class = "text-danger" })
</div>

我的 CSS/样式表

.form-group .required .control-label:after {
         content:" *" !important;
         color:red !important;
}

这是目前的样子。它应该在标签“名字”之后有一个红色 *。

Answer 1

我认为这里有两个小错误。

1. 控件标签类引用在您的 css 中，但不在实际的 html 标记中。

2. 正如评论中提到的那样，css 选择器有点偏离。我刚刚尝试了您的代码，并且能够看到红色星号 这些变化:

   <div class="form-group required col-md-4">
    @Html.LabelFor(model => model.Buy1FirstName, new { @class = "control-label" })
    @Html.EditorFor(model => model.Buy1FirstName, new { htmlAttributes = new { @class = "form-control", required = "required" } })
    @Html.ValidationMessageFor(model => model.Buy1FirstName, "Please enter a valid first name", new { @class = "text-danger" })
   

   .form-group.required .control-label:after {
       content: " *" !important;
       color: red !important;
   }
   

请注意，我所做的唯一更改是将 html 标签中的类引用添加到“control-label”，并删除 css 部分中 .form-group 和 .required 之间的空格。