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

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

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

解决方法

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

下面，我使用了将 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>

Here is the link to the Jsfiddle.

,

@AhmadKarimi 感谢您的评论和解决方案。我只是在处理不同的形式时（偶然地）想通了。我需要将标签表单控件放到表单组内部的一层。不过，它似乎在 jfiddle 中不起作用。

    <div class="form-group mb-3">
       <label for="contact_first_name" class="form-label required">Contact Name</label>
        <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>