Bootstrap 4.1 浮动标签答案

【问题标题】：Bootstrap 4.1 floating labelsBootstrap 4.1 浮动标签
【发布时间】：2021-05-13 00:31:07
【问题描述】：

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

但是，在该页面中，没有说明如何实现这一点，而且我在 4.1 版的文档中找不到任何内容。 ship list 中甚至没有将浮动标签列为新功能。

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

【问题讨论】：

标签： css user-interface label bootstrap-4

【解决方案1】：

它在Bootstrap examples 页面上说 floating-labels 是...

“实验 - 专注于面向未来的功能或技术。”

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

使用 floating-labels.css 可以在支持的浏览器中按预期工作...

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

【讨论】：

嗨 Zim，我尝试将电子邮件输入机器人的高度更改为 80 像素，标签不再居中对齐。任何想法？谢谢。

【解决方案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>

【讨论】：

【解决方案3】：

他们在上述示例网站中使用的样式

:root {
  --input-padding-x: .75rem;
  --input-padding-y: .75rem;
}

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 15px;
  margin: 0 auto;
}

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label {
  padding: var(--input-padding-y) var(--input-padding-x);
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
  padding-bottom: calc(var(--input-padding-y) / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(var(--input-padding-y) / 3);
  padding-bottom: calc(var(--input-padding-y) / 3);
  font-size: 12px;
  color: #777;
}

【讨论】：

【解决方案4】：

如果你真的想要浮动标签，请查看这个很棒的 Bootstrap 4 主题：http://djibe.github.io/material/docs/4.4/material/text-fields/

【讨论】：

【解决方案5】：

以下 SCSS 版本包括对 textarea 的支持并排除 IE11 中的样式，不支持 :placeholder-shown。

:root {
    --input-padding-x: .75rem;
    --input-padding-y: .75rem;
}

.floating-label {
    $placeholderColour: $middleGrey;
    position: relative;

    input, textarea, label {
        padding: var(--input-padding-y) var(--input-padding-x);
    }

    label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        margin-bottom: 0;
        line-height: 1.5;
        color: $placeholderColour;
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;

        &:hover {
            cursor: text;
        }
    }

    input::-webkit-input-placeholder {
        color: transparent;
    }

    input:-ms-input-placeholder {
        color: transparent;
    }

    input::-ms-input-placeholder {
        color: transparent;
    }

    input::-moz-placeholder {
        color: transparent;
    }

    input::placeholder {
        color: transparent;
    }

    textarea::-webkit-input-placeholder {
        color: transparent;
    }

    textarea:-moz-placeholder {
        color: transparent;
    }

    textarea::-moz-placeholder {
        color: transparent;
    }

    textarea:-ms-input-placeholder {
        color: transparent;
    }

    textarea::placeholder {
        color: transparent;
    }

    input:not(:placeholder-shown),
    textarea:not(:placeholder-shown) {
        padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
        padding-bottom: calc(var(--input-padding-y) / 3);
    }

    input:not(:placeholder-shown) ~ label,
    textarea:not(:placeholder-shown) ~ label {
        padding-top: calc(var(--input-padding-y) / 3);
        padding-bottom: calc(var(--input-padding-y) / 3);
        font-size: 12px;

        &:hover {
            cursor: default;
        }
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        label {
            display: none;
        }

        textarea:-ms-input-placeholder, input:-ms-input-placeholder {
            color: $placeholderColour;
        }

        textarea::-ms-input-placeholder, input::-ms-input-placeholder {
            color: $placeholderColour;
        }
    }
}

【讨论】：

这在 bootstrap 4 上对我来说效果很好，只需要定义 $middleGrey 并添加 .floating-label input.form-control { height: auto; }

【解决方案6】：

我为 Bootstrap 4 和 5 创建了一个输入浮动标签（与 Bootstrap 提供的外观不同）：https://github.com/tkrotoff/bootstrap-floating-label

这里是在线演示：https://codesandbox.io/s/github/tkrotoff/bootstrap-floating-label/tree/codesandbox.io

【讨论】：