laravel - 如何使用 Laravel 和 Bootstrap 4 在两个文本字段上方显示具有所需类的单个表单标签

Question

我正在使用 Laravel 和 Bootstrap 4.2.1，并希望在两个必需的内联文本字段上显示表单标签。我可以通过将表单标签放在表单组之外来获取两个字段的标签，但我无法在表单标签旁边显示红色星号 (*)。我已将代码放在jsfiddle 中。

    <label for="contact_first_name" class="form-label required">Contact Name</label>
    <div class="form-group mb-3">
        <div class="row">
           <div class="col-md-6">
              <input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
                     placeholder="First Name" value="" required>
           </div>
           <div class="col-md-6">
              <input class="form-control" id="contact_last_name" name="contact_last_name" type="text" 
                     placeholder="Last Name" value="" required>
           </div>
       </div>
    </div>

标签： laravelbootstrap-4fieldrequired

Answer 1

尝试在标签标签内class="text-danger"或style="color:red"内添加一个跨度标签，并在其中添加 *。无论哪种方式，您都会得到带有标签的 * 符号。

下面，我使用了添加class="text-danger"到 span 标签的引导方法。

<label for="contact_first_name" class="form-label required">Contact Name 
  <span class="text-danger">*</span>
</label>
<div class="form-group mb-3">
  <div class="row">
    <div class="col-md-6">
      <input class="form-control" id="contact_first_name" name="contact_first_name" type="text"
             placeholder="First Name" value="" required>
    </div>
    <div class="col-md-6">
      <input class="form-control" id="contact_last_name" name="contact_last_name" type="text" 
             placeholder="Last Name" value="" required>
    </div>
  </div>
</div>

这是 Jsfiddle 的链接。