html - 如何移动文本框下的标签？

Question

大家晚上好，我正在用 asp.net core 解决方案创建一个表单，我的 ccs 有问题。

当我按下发送按钮并且输入为空时，它会验证并发送一条错误消息；问题是执行此操作时，输入的大小会发生变化。 如何将这些标签移动到我的文本框下方？

<label asp-for="CxP_NroControl" class="control-label"></label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-paragraph"></i>
        </span>
    </div>
    <input asp-for="CxP_NroControl" class="form-control" />
    <span asp-validation-for="CxP_NroControl" class="text-danger"></span>
</div>

<label asp-for="CxP_NroFactura" class="control-label"></label>
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-paragraph"></i>
        </span>
    </div>
    <input asp-for="CxP_NroFactura" class="form-control" />
    <span asp-validation-for="CxP_NroFactura" class="text-danger"></span>
</div>

Answer 1

应用以下 CSS 将为您提供所需的输出。

span.text-danger {
    display:block;
}