Bootstrap模态框中input-group与form-floating标签显示异常问题

我在Bootstrap模态框中构建了如下表单：

<div class="modal fade" id="add-item" tabindex="-1" aria-labelledby="add-item-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="add-item-label">Добавление позиции</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{% url 'storage:add-item-in-supply' id %}" method="POST" class="form" novalidate>
        <div class="modal-body">
          {% csrf_token %}
          <div class="input-group form-floating mb-3" id="item-datalist-group">
            <input class="form-control" id="item-datalist" placeholder="Позиция" name="item"
              type="text" list="items" autocomplete="off">
            <label for="item-datalist">Позиция</label>
            <button class="btn btn-outline-secondary" type="button" id="clear-input" title="Очистить">
              <i class="fa fa-eraser"></i>
            </button>
            <datalist id="items" placeholder="Позиция">
              {% for i in add_item_in_supply_form.fields.item.queryset %}
                <option data-value="{{ i.id }}" value="{{ i }}"></option>
              {% endfor %}
            </datalist>    
          </div>
          <div class="form-floating mb-3">
            {{ add_item_in_supply_form.count }}
            <label for="full_number">Кол-во</label>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Добавить</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отменить</button>
        </div>
      </form>
    </div>
  </div>
</div>

当#item-datalist输入框获得焦点时，对应的标签会隐藏。我尝试为#item-datalist设置z-index=999、调整元素位置，以及将input-group与form-floating类拆分后得到如下代码：

<div class="input-group" id="item-datalist-group">
  <div class="form-floating mb-3">
  <input class="form-control" id="item-datalist" placeholder="Позиция" name="item"
    type="text" list="items" autocomplete="off">
   <label for="item-datalist">Позиция</label>
   </div>
   <button class="btn btn-outline-secondary" type="button" id="clear-input" title="Очистить">
    <i class="fa fa-eraser"></i>
   </button>
   <datalist id="items" placeholder="Позиция">
    {% for i in add_item_in_supply_form.fields.item.queryset %}
      <option data-value="{{ i.id }}" value="{{ i }}"></option>
    {% endfor %}
  </datalist>    
</div>

此时标签又无法正常隐藏，请问该如何修复这个问题？

Bootstrap的form-floating组件依赖特定DOM结构和样式规则实现标签浮动/隐藏效果，和input-group组合时需遵循正确嵌套顺序：将input-group放在form-floating内部，同时确保输入框样式不会被层级覆盖。

修正后的代码 #

<div class="form-floating mb-3" id="item-datalist-group">
  <div class="input-group">
    <input class="form-control" id="item-datalist" placeholder="Позиция" name="item"
           type="text" list="items" autocomplete="off">
    <button class="btn btn-outline-secondary" type="button" id="clear-input" title="Очистить">
      <i class="fa fa-eraser"></i>
    </button>
  </div>
  <label for="item-datalist">Позиция</label>
  <datalist id="items" placeholder="Позиция">
    {% for i in add_item_in_supply_form.fields.item.queryset %}
      <option data-value="{{ i.id }}" value="{{ i }}"></option>
    {% endfor %}
  </datalist>    
</div>

补充样式调整（若仍有异常） #

如果标签位置或显示仍有问题，添加以下自定义CSS确保标签层级和触发逻辑正常：

#item-datalist-group .form-floating > .input-group > .form-control {
  padding-right: 5rem; /* 给右侧按钮留出空间 */
}

#item-datalist-group .form-floating label {
  z-index: 1; /* 确保标签不会被输入框或按钮覆盖 */
}

原理说明 #

1. 将input-group嵌套在form-floating内部，保留了form-floating对输入框焦点状态的监听逻辑，确保标签能正常浮动/隐藏。
2. 调整输入框内边距，避免右侧按钮覆盖输入内容。
3. 明确标签的z-index，防止被其他元素遮挡。

内容的提问来源于stack exchange，提问作者Sigarev Andrey