Question

我有一个带有3个字段First Name，Second Name，Email的bootstrap模式。我正在使用laravel 5.2来验证表单。它成功地回放了错误消息，并且我在输入字段正下方创建的div中打印相同的内容。但问题是错误消息正在增加整个弹出窗口的高度。

我想在输入下方显示错误消息，而不会增加弹出窗口的高度。有什么我可以做到的吗??

<div id="registerModal" class="modal fade">
    <div class="modal-dialog" style="margin-top: 10%;">
        <div class="modal-content">
            <div class="modal-body">
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2 register-heading">
                  <center> REGISTER </center>
                </div>
                <form method="POST" action="/user-register" id="register-form">
                  <div id="status-message"></div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="first_name" name="first_name" placeholder="Full Name">
                      <span id="first-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="second_name" name="second_name" placeholder="Last Name">
                      <span id="second-name-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="text" class="form-control register-fields" id="register_email" name="email" placeholder="Email">
                      <span id="email-register-error-message" class="register-error-message"></span>
                  </div>
                  <div class="col-sm-10 col-sm-offset-1 regsiter-form-fields">
                      <input type="hidden" name="_token" value="{{ csrf_token() }}">
                      <input name="register-submit" type="submit" id="register-form-submit" class="btn btn-danger pull-left btn-lg register-button" value="CONTINUE" />
                  </div>
                </form>
              </div>
            </div>
        </div>
    </div>
</div>

---- ----的js

if (data.first_name) {
    $("span#first-name-register-error-message").html(data.first_name).show();
}
else {
   $("span#first-name-register-error-message").hide();
}

css ------

.regsiter-form-fields {
    padding-bottom: 9%; 
}
.error-message-register {
    border-bottom: 1px red solid;
    /** border-radius: 4px; **/
}

Answer 1

请使用position: absolute;作为错误消息，并在父级上应用一些底部缩进，以避免与其他元素重叠...

.regsiter-form-fields {
    padding-bottom: 20px; // modify this as per your needs..
}
.register-error-message {
    position: absolute;
    bottom: 0;
    left: 0;
}

Answer 2

如上所述，您应该使用绝对定位来防止文档流中断。

但是，不要忘记将position: relative设置为每个表单组，以便错误显示在输入下方而不会叠加在彼此之上。

.register-form-fields {
  position: relative;
  // padding as required
}

.register-error-message {
  position: absolute;
  bottom: 0;
  left: 0;
}

显示错误时，Bootstrap高度会增加

2 个答案: