Bootstrap "required" class 不适用于当前的 MVC 网络应用程序

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/StyleSheet

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

这是目前的样子。它应该在标签 "First Name".

之后有一个红色的 *

Answer 1

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

1. 控制标签 class 引用在您的 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 标签中的 class 引用添加到 "control-label"，并删除 .form-group 和 .form-group 之间的 space。 css 部分需要。