Карта наклеена вверху страницы bootstrap 4 - PullRequest
Новая
       21

Карта наклеена вверху страницы bootstrap 4

0 голосов
/ 01 мая 2020

Я попытался выровнять контейнер по середине страницы, но он, похоже, застрял в верхней части страницы.

Я прочитал похожий вопрос , но они не Кажется, не работает. Я скопировал некоторые фрагменты кода, но в моем браузере firefox они все еще застряли в верхней части страницы. Я не уверен, что это проблема браузера.

Вот мой код. 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Log In</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div class="container d-flex justify-content-center h-100 mx-auto">
    <div class="row justify-content-center">
      <div class="col">
        <div class="card text-center" style="min-width: 23rem; max-width: 23rem;">
          <div class="card-header bg-success text-white text-center">Login</div>
          <div class="card-body">
            <form>
              <div class="form-row mb-2">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username">
              </div>
              <div class="form-row mb-4">
                <label for="Password">Password</label>
                <input type="password" class="form-control" id="password">
              </div>
              <div class="row">
                <div class=" col text-center">
                  <button type="submit" class="btn btn-success">Submit</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 
    <div class="container-fluid h-100 d-flex flex-column justify-content-center">
        <div class="row justify-content-center bg-info">
            <div class="col-4">
    
                <div class="card">
                    <div class="card-header">Access</div>
                    <div class="card-body">
                        <div class="form-group">
                            Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
                        </div>
                    </div>
                    <div class="card-footer text-right">
                        <button type="submit" class="btn btn-danger">ok</button>
                    </div>
                </div>
    
            </div>
        </div>
    </div> -->

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Вот как вы можете это сделать! 

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Log In</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <style>          <--- Added style tag
        .box{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      </style>

    </head>

    <body>
      <div class="box container d-flex justify-content-center mx-auto">
        <div" class="justify-content-center">
          <div class="col">
            <div class="card text-center" style="min-width: 23rem; max-width: 23rem;">
              <div class="card-header bg-success text-white text-center">Login</div>
              <div class="card-body">
                <form>
                  <div class="form-row mb-2">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" id="username">
                  </div>
                  <div class="form-row mb-4">
                    <label for="Password">Password</label>
                    <input type="password" class="form-control" id="password">
                  </div>
                  <div class="row">
                    <div class=" col text-center">
                      <button type="submit" class="btn btn-success">Submit</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>



    </body>

    </html>
0 голосов
/ 01 мая 2020

Вы можете достичь желаемого поведения, добавив: 

align-items: center;

Css style в class = "container-liquid".

...