响应式输入表单中浮动标签定位异常问题求助

问题根源：小屏幕下你给输入框设置了width:85%和margin:0 auto实现居中，但浮动标签是相对于父容器.form-floating绝对定位的，而父容器宽度仍为100%，导致标签的left:0.75rem是相对于容器左边缘，而非居中后的输入框左边缘，最终出现错位。

以下是两种可行的解决方案：

方案一：调整标签偏移量，对齐居中输入框 #

通过计算输入框左侧留白宽度，让标签位置匹配输入框：

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

@media (max-width: 575px) {
  .form-floating > .form-control,
  .form-floating > .form-select {
    display: block;
    width: 85%;
    padding: 0.375rem 0.75rem;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .form-floating > label {
    position: absolute;
    top: 0.5rem;
    /* 计算输入框左侧留白+内边距，让标签对齐输入框 */
    left: calc((100% - 85%)/2 + 0.75rem);
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  }
  /* 处理输入框有内容/聚焦时标签上浮的样式，保持对齐 */
  .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
  .form-floating > .form-select ~ label {
    left: calc((100% - 85%)/2 + 0.75rem);
    transform: translateY(-0.5rem) scale(0.85);
  }
}

方案二：让父容器居中并限制宽度（更简洁） #

将.form-floating容器设为85%宽度并居中，输入框占满容器宽度，标签定位逻辑和大屏幕保持一致：

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

@media (max-width: 575px) {
  /* 父容器居中并限制宽度 */
  .form-floating {
    width: 85%;
    margin: 0 auto;
  }
  .form-floating > .form-control,
  .form-floating > .form-select {
    display: block;
    width: 100%; /* 输入框占满父容器 */
    padding: 0.375rem 0.75rem;
    box-sizing: border-box;
  }
  .form-floating > label {
    position: absolute;
    top: 0.5rem;
    left: 0.75rem;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  }
}

推荐方案二，它延续了Bootstrap浮动标签的原生定位逻辑，代码更简洁，也不易引发样式冲突。

内容的提问来源于stack exchange，提问作者jimiclapton