这有点取决于你如何定义"fix"，但一个简单的解决方案是在标签后面添加一个白色背景条：

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
  <div></div>
</div>

.form-floating textarea:not(:placeholder-shown) ~ label ~ div {
    width: calc(100% - 2rem);
    height: 2rem;
    background-color: white;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    padding-top: 1.625rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.form-floating textarea ~ label {
  z-index: 2;
}

另一个选择是在添加内容时自动增长文本区域，here概述了一些好的方法。

<div class="mb-3 form-floating">
      <label for="" class="form-label">Textarea</label>
      <textarea class="form-control py-5"></textarea>
    </div>

我在我的一个项目中添加了这种方法，效果很好。根据需要添加顶部和底部的填充。

这里的解决方案类似于@tim在bootstrap 5.3上的工作，它在标签上添加了一个白色的BG，这样看起来更好。
超文本：

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

只需添加此样式：

.form-floating>.form-control:not(:placeholder-shown)~label
    {
        margin: calc(1rem - 3px) calc(0.75rem - 2px);
        padding: 0rem 0rem;
        height: auto;
        background-color: white;
        opacity: 0.95;
        color: green;
    }

它的作用：

• 将填充转换为边距，以便背景仅位于文本标签上（Bootstrap对标签使用填充，然后背景覆盖的区域比标签本身大得多）
• 使高度自动从100%（Bootstrap将其设置为100%，因为标签覆盖整个区域）
• margin中的calc函数用于删除margin和padding之间的差异，以确保用户开始在框中键入时标签不会移动
• 可选：将标签的颜色更改为green，使其看起来与标签后面的文本颜色不同。根据您的喜好进行更改。
• 可选：使不透明度为0.95。根据您的喜好更改它。

样品：