如何使用浮动标签降低输入高度？

Answer 1

您可能需要一些自定义CSS，为了保持一致性，它们可能应该全局应用。像这样的事情应该做。它将输入高度从 58px 减少到 42px。

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(2.5rem + 2px);
  line-height: 1;
}

.form-floating>label {
  padding: 0.5rem 0.75rem;
}

仅供参考，我为这个解决方案所做的就是检查官方演示并使用样式，直到我让它工作。

Answer 2

不要忘记在每个属性的最后添加 !important 以覆盖 Bootstrap 属性：

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem !important;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(2.5rem + 2px) !important;
  line-height: 1 !important;
}

.form-floating>label {
  padding: 0.5rem 0.75rem !important;
}

Answer 3

你所需要的只是这一段CSS代码

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(1rem + 2px) !important;
}