Question

我添加了以下代码，该代码与添加form标记时的预期结果有所不同。尝试删除表单标签以查看区别。

<!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>

带有表单标签

没有表单标签

我希望它看起来像第二张图片，但是不知道为什么表单标签会更改对齐方式。

Answer 1

您的表单标签应具有col-sm-12类

<form action="" class="col-sm-12">
...
</form>

Answer 2

使用以下代码更改表单代码：

<form action="" class="col-sm-12">

                      <div class="row">
                        <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>
                      </div>

                      </form>

对齐它，应该只在行类中使用col类。

Answer 3

<!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="" class="w-100">

                        <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 border-0" 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>

Answer 4

尝试这种结构。这对您来说很容易。

   .fondo {
      background-image: url('https://source.unsplash.com/uR6dIgDnt38/1920x1080');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh
    }
    .sombra{text-shadow: 1px 1px 2px rgb(0, 0, 0);}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <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>
</head>
<body>
  <div class="fondo d-flex justify-content-center align-items-center flex-column">
    <h1 class="text-white mb-4 sombra">Title</h1>
    <form action="">
      <div class="form-group">
        <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>
</body>
</html>

Boostrap 4表格混乱对齐

4 个答案: