Bootstrap 输入组中的 5 个浮动标签

Question

我想一起使用 Bootstrap 的“浮动标签”和“输入组”组件。我遇到的问题是当输入聚焦时标签被隐藏。在下面的代码示例中，我有以下场景：

1. 两个组件（单击输入时标签会消失）。
2. 仅浮动标签

有谁知道如何让这些组件一起工作？

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-floating input-group mb-3">
    <input type="text" class="form-control" name="code1" placeholder="Code 1">
    <label for="code1">Code 1</label>
    <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

<div class="form-floating mb-3">
    <input type="text" class="form-control" name="code4" placeholder="Code 4">
    <label for="code4">Code 4</label>
</div>

Answer 1

将浮动标签放置在另一个input-groupdiv 内。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

更新：自 Bootstrap 5.2 起，flex-grow-1不再需要，并且自动解决边框舍入问题。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>

Answer 2

为了改善@Unmitigated的答案，我最终删除了输入的两个右手角的半径。

.form-floating-group input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group mb-3">
  <div class="form-floating form-floating-group flex-grow-1">
      <input type="text" class="form-control" name="code1" placeholder="Code 1">
      <label for="code1">Code 1</label>
  </div>
  <span class="input-group-text"><i class="fas fa-times"></i></span>
</div>