Bootstrap 4.1 浮动标签

Question

我在 Google 上找到了 Bootstrap 4.1 的文档示例，其中包含浮动标签：getbootstrap.com/docs/4.1/examples/floating-labels/

然而，在该页面中，没有解释如何实现这一点，我在 v. 4.1 的文档中找不到任何内容。浮动标签甚至没有被列为船舶列表中的新功能。

有谁知道是否支持浮动标签？

Answer 1

它在Bootstrap 示例页面上说浮动标签是...

“实验 - 专注于对未来友好的功能或技术的示例。”

像许多其他示例一样，示例中还使用了一个额外的 CSS 文件......

使用 float-labels.css 它们在支持的浏览器中按预期工作......

https://www.codeply.com/go/X9VbHqzD4B

Answer 2

对我来说最好的方法是使用转换翻译。它更光滑。我添加了额外的类来防止覆盖引导程序原始类。

body{padding:75px}
.form-group.floating>label {
    bottom: 34px;
    left: 8px;
    position: relative;
    background-color: white;
    padding: 0px 5px 0px 5px;
    font-size: 1.1em;
    transition: 0.1s;
    pointer-events: none;
    font-weight: 500 !important;
    transform-origin: bottom left;
}

.form-control.floating:focus~label{
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
    color: #005ebf;
}

.form-control.floating:valid~label{
    transform-origin: bottom left;
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group floating">
<input type="text" class="form-control floating" id="usr" required value="">
<label for="usr">Username</label>
</div>