html - Boostrap 4 form messes alignment

问题描述

I have the folowing code that renders different from what I was expecting when you add the form tag. Try removing the form tags to see the difference.

<!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
        <title>Hello, world!</title>
        <style>
    html, body {
      height: 100%;
    }
    
    .min-100 {
        min-height: 100%;
    }
    .fondo {
      background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    .sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}
        </style>
      </head>
      <body>
        <div class="container-fluid min-100 d-flex flex-column">
            <div class="row flex-grow-1 vh-100 bg-info">
                <main class="col p-4 flex-grow-1 fondo">
                    <div class="container d-flex h-100">
                        <div class="row justify-content-center align-self-center col-md-12">
                            <h1 class="text-white mb-4 sombra">Title</h1>
                            <form action="">
    
                            <div class="form-group col-md-12">
                              <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text" id="basic-addon1"><i class="fas fa-link"></i></span>
                                </div>
                                <input type="text" class="form-control" placeholder="Upload File">
                                <div class="input-group-append">
                                  <button class="btn btn-success">Guardar</button>
                                </div>
                              </div>
                            </div>
                          </form>
                              <p class="text-white lead sombra">A paragraph!</p>
                        </div>
                    </div>
                </main>
            </div>
        </div>
      </body>
    </html>

With form tag

Without form tag

I want it to look like the second picture, but dont know why the form tag changes the alignment.

标签： htmlcssflexbox

html - Boostrap 4 form messes alignment

问题描述

解决方案

推荐阅读