html - 将错误文本的间距构建到输入组中

Question

我正在尝试在我的表单输入组组件上为错误文本构建间距。目标是避免在显示错误文本时替换表单上的任何元素。

在下面的示例中，密码输入和“我忘记了密码”之间应该有 25 像素的空白空间，这样当输入无效时，可以在不移动页面上已经可见的元素的情况下显示错误文本。

在我开始使用 bootstrap 4 网格系统之前，由于某种原因，我使用负边距的解决方案似乎确实有效。

    <b-form-group v-bind="$attrs" class="tsny_input-group">
      <b-input
        v-bind="$attrs"
        v-model="innerValue"
        class="tsny_input"
        :invalid="invalid"
      />
      <div class="tsny_field_error-text">
        {{ errors[0] }}
      </div>
    </b-form-group>

  .tsny_input-group {
    margin-bottom: 25px;
  }

  .tsny_field_error-text {
    font-family: "expo-sans-pro", sans-serif;
    color: #FF8787;
    margin-bottom: -25px;
  }

标签： htmlcssvue.jsbootstrap-4

Answer 1

使用 David Weldon 的最小高度建议解决。我能够摆脱我的边距，我的最终 CSS 如下：

  .tsny_field_error-text {
    font-family: "expo-sans-pro", sans-serif;
    color: #FF8787;
    min-height: 25px;
  }