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

Question

我正在使用带有 jquery 的 Bootstrap 4 表单验证方法，验证工作正常，但由于某种原因，消息 <div> 在获取“块”属性后更改了整个表单宽度。

这是我的 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

Answer 1

检查这支笔。我将 col-3 类添加到 l-main-content。这解决了你的问题。

<main class="l-mainContent col-3">

https://codepen.io/anon/pen/BPVOxp

l-mainContent 没有特定的宽度，因此它正在扩展以包含其中的元素。添加无效反馈 div 时，它比其他元素长，因此 l-mainContent 变得扩展。

Bootstrap 的 col- 类具有指定的宽度，因此添加 col-3 强制 l-mainContent 到指定的宽度，而不管其中的元素如何。