Bootstrap 5 在 textarea 上的浮动标签答案

【问题标题】：Bootstrap 5's floating label on textareaBootstrap 5 在 textarea 上的浮动标签
【发布时间】：2021-07-05 09:33:53
【问题描述】：

我想以某种方式解决 textarea 标签上的浮动标签和文本冲突。图片：如果您想现场试用，请访问此处的网站：https://getbootstrap.com/docs/5.0/forms/floating-labels/ 基本上只需输入 4 行或更多行。我知道他们将来可能会解决它，但我至少想要一个临时解决方案。有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap textarea floating-labels

【解决方案1】：

这在一定程度上取决于您如何定义“修复”，但一个简单的解决方案是在标签后面添加一个白色背景条：

<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 列出了一些好的方法。

【讨论】：

【解决方案2】：

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

我在我的一个项目中添加了这种方式，并且效果很好。根据需要添加 padding-top 和 bottom。

【讨论】：

我看到你添加了 py-5 但对我来说它并没有做任何事情，碰撞仍然存在。您可以使用固定行，但我不这样做，因此用户可以输入任何内容。