引导4表单验证消息更改布局宽度

我在jquery中使用Bootstrap 4表单验证方法,验证工作正常,但由于某些原因,消息 <div> 获取“block”属性后更改整个窗体宽度。

这是我的html:

<div class="container l-login-container">
  <main class="l-mainContent">
    <form class="login needs-validation" id="login-form" novalidate>
      <div class="row">
        <div class="col">
          <img src="assets/img/ayuntament-bcn.png" alt="Logo" height="30px">
        </div>
        <div class="col">
          <img src="assets/img/logo.png" alt="Logo" height="30px">
        </div>
      </div>
      <div class="form-group">
        <label for="username" class="control-label">Usuario</label>
        <div class="input-group input-group-sm">
          <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa" aria-hidden="true"></i>
                                        </span>
          </div>
          <input type="text" class="form-control" name="username" id="username" placeholder="Ingressar nom d'usuari" required/>
          <div class="invalid-feedback">No Validado</div>
          <div class="valid-feedback">Datos Correctos</div>
        </div>
      </div>
      <div class="form-group mb-4">
        <label for="password" class="control-label">Contrasenya</label>
        <div class="input-group input-group-sm">
          <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-lock" aria-hidden="true"></i>
                                    </span>
          </div>
          <input type="password" class="form-control" name="password" id="password" placeholder="Ingressar contrasenya" required/>
          <div class="invalid-feedback">
            No Validado
          </div>
          <div class="valid-feedback">
            Datos Correctos
          </div>
        </div>
      </div>
      <button type="button" id="submitButton" class="btn btn-primary btn-sm btn-block" type="submit">Login</button>
    </form>
  </main>
</div>

这里是SCSS:

.l-login-container {
    align-items: center;
    display:flex;
    height:100%;
    justify-content: center;
    .l-mainContent {
        border:1px solid #eee; 
        padding:20px;
        img {
            display: block;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
        }        
        .login {
            .form-group {
                &:last-child {
                    margin-top: 1.5rem;
                }
                label {
                    font-weight: 400;
                }
            }    
        }
    }
}
.l-mainContent {
    margin:2rem 0 0 0;
    padding:0 0 2rem 0;
}

下面是用于验证的js代码:

(function ($, window, document, undefined) {
    "use strict";          
    $( document ).ready(function() {
        $("#submitButton").click(function(event) {
            var form = $("#login-form")          
            if (form[0].checkValidity() === false) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.addClass('was-validated');          
        })              
    });                   
})(jQuery, window, document);

以防万一,你需要看看一切是如何运作的: here's a pen code