html - 向我的验证消息 ASP.Net MVC 添加换行符

Question

我有一条验证消息，在它的正下方有一个包含一些文本的文本字段。当验证消息被隐藏时，文本字段下方的文本很好，但是当验证消息显示它与下面的文本内联时，就像这些图片中一样。有什么方法可以解决此问题，使验证消息位于一行而文本位于下面一行？

这是验证消息的html代码

<div class="form-group">
  <label for="lastNameName" class="col-sm-2 control-label">Last Name</label>
  <div class="col-sm-10">
    @Html.TextBoxFor(m => m.ProfileGeneralViewModel.LastName, new { @id = "lastName", @class = "form-control" }) 
    @Html.ValidationMessageFor(m => m.ProfileGeneralViewModel.LastName, "", new { @class = "text-danger" })
    <text>Your public profile only shows your first name.</text>
  </div>
</div>

这是呈现的 HTML

<div class="form-group">
  <label class="col-sm-2 control-label" for="lastNameName">Last Name</label>
  <div class="col-sm-10">

    <input name="ProfileGeneralViewModel.LastName" class="form-control input-validation-error" id="lastName" aria-invalid="true" aria-describedby="lastName-error" type="text" value="pareto" data-val="true" data-val-regex-pattern="^[A-Za-z0-9_]+$" data-val-regex="Hey, no funny symbol stuff"
      data-val-minlength-min="4" data-val-minlength="Minimum length is 4" data-val-maxlength-max="18" data-val-maxlength="Maximum length is 18">
    <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="ProfileGeneralViewModel.LastName"><span id="lastName-error">Minimum length is 4</span></span>
    <text>Your public profile only shows your first name.</text>
  </div>
</div>

Answer 1

最好使用bootstrap class="help-block" 的类 ( <text>Your public profile only shows your first name.</text> )像这样:

<div class="form-group">
  <label class="col-sm-2 control-label" for="lastNameName">Last Name</label>
  <div class="col-sm-10">

    <input name="ProfileGeneralViewModel.LastName" class="form-control input-validation-error" id="lastName" aria-invalid="true" aria-describedby="lastName-error" type="text" value="pareto" data-val="true" data-val-regex-pattern="^[A-Za-z0-9_]+$" data-val-regex="Hey, no funny symbol stuff"
      data-val-minlength-min="4" data-val-minlength="Minimum length is 4" data-val-maxlength-max="18" data-val-maxlength="Maximum length is 18">
    <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="ProfileGeneralViewModel.LastName"><span id="lastName-error">Minimum length is 4</span></span>

    <div class="help-block">Your public profile only shows your first name.</div>

  </div>
</div>

Online output

有关验证器元素的 Bootstrap 类的更多信息，请参阅 this .