我正在尝试在我的表单输入组组件上为错误文本添加间距。目标是避免在显示错误文本时替换我表单上的任何元素。
在下面的例子中,密码输入和“我忘记了密码”之间应该有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;
}
最佳答案
使用 David Weldon 的最小高度建议解决。我能够摆脱我的边距,我的最终 CSS 如下:
.tsny_field_error-text {
font-family: "expo-sans-pro", sans-serif;
color: #FF8787;
min-height: 25px;
}
关于html - 将错误文本构建到输入组中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57896242/