代码之家  ›  专栏  ›  技术社区  ›  Lowtrux

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

  •  1
  • Lowtrux  · 技术社区  · 6 年前

    我在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

    1 回复  |  直到 6 年前
        1
  •  0
  •   souzan    6 年前

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

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

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

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

    Bootstrap的col-classes具有指定的宽度,因此添加col-3会强制将l-mainContent添加到指定的宽度,而不考虑其中的元素。