Bootstrap 字段顶部有 5 个浮动标签

Question

我想像这样放置浮动标签：

正常的行为是这样的，但输入区域对于我的目的来说太大了。

我不知道如何设置它。 Bootstrap 4 有一个额外的框架，但这不适用于 V5。

提前致谢！

Answer 1

您可以使用 <fieldset> 和 <legend> 插入 <input>

<fieldset>
    <legend>Password</legend>
    <input type="password">
</fieldset>

然后使用CSS根据需要设置填充/边距/边框等

更多信息：https://www.w3schools.com/tags/tag_fieldset.asp

Answer 2

可以覆盖对应的bootstrap 5 css class:

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
  opacity: .65;
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

将 translateY(-.5rem) 设置为 -2rem 或 -20px 或任何适合您的布局。您还可以设置背景：白色；

Bootstrap 字段顶部有 5 个浮动标签

Bootstrap 5 floating label on top of the field

css

bootstrap-4

floating-labels