Bootstrap 4 - Как правильно центрировать Div (форму)? - PullRequest
Новая
       86

Bootstrap 4 - Как правильно центрировать Div (форму)?

1 голос
/ 02 февраля 2020

Я только начал использовать Bootstrap, и у меня возникли некоторые проблемы с отображением формы в центре страницы. Пока что я использовал стиль CSS, чтобы убедиться, что теги html и body находятся на 100% высоты. Затем у меня есть два div: внешний div использует всю высоту страницы и использует «justify-content-center». Внутренний div использует «align-items-center». При этом мне удалось получить форму для отображения в центре. Тем не менее, я остаюсь с этим пробелом, который простирается сверху и снизу формы.

Это несколько неясный вопрос, но есть ли способ для меня, чтобы удалить этот пробел (как в например, сжать контейнер или что-то в этом роде), или, возможно, go о центрировании div другим способом?

Я использую jade / pug для моего механизма шаблонов представления. Вот исходный код: 


block content
  div(class="row h-100 justify-content-center")
    div(class="d-flex align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="johndoe@email.com", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

Вот layout.jade, от которого он наследует: 

doctype html
html(style="height:100%")
  head
    title= title
    link(rel='stylesheet', href='/node_modules/bootstrap/dist/css/bootstrap.min.css')
    script(src="/../node_modules/jquery/jquery.min.js")
    script(src="/../node_modules/popper.js/dist/umd/popper.min.js")
    script(src="/../node_modules/bootstrap/dist/js/bootstrap.min.js")
  body(style="height:100%;background-image:url(../public/images/index-background.jpg);")
    block content

А вот как выглядит страница: снимок экрана page

Буду признателен за любые предложения, большое спасибо!

1 Ответ

0 голосов
/ 02 февраля 2020

Просто добавьте align-items-center класс вместе с классом строки. 

block content
  div(class="row h-100 justify-content-center align-items-center") /*add align-items-center here*/
    div(class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded")
      div
        h3(class="text-center") Submit Your Attendance
        form
          div(class="form-group")
            label(for="firstname") First Name
            input(class="form-control", type="text", id="firstname", placeholder="John", name="firstname")
          div(class="form-group")
            label(for="lastname") Last Name
            input(class="form-control", type="text", id="lastname", placeholder="Doe", name="lastname")
          div(class="form-group")
            label(for="email") Email Address
            input(class="form-control", type="text", id="email", placeholder="johndoe@email.com", name="email")
          div(class="text-center")
            button(class="btn btn-primary", type="submit") Submit

только что я перевел мопса html в нормальное рабочее состояние.

DEMO: 

<!DOCTYPE html>
<html lang="en" style="height:100%;">

<head>
  <title>Bootstrap Example</title>
  <meta charset=" utf-8 ">
  <meta name="viewport " content="width=device-width, initial-scale=1 ">
  <link rel="stylesheet " href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css ">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js "></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js "></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "></script>
</head>

<body style="height:100% ">
  <div class="row h-100 justify-content-center align-items-center ">

    <div class="d-flex flex-column align-items-center shadow-lg p-3 mb-5 bg-white rounded ">
      <h3 class="text-center ">Submit Your Attendance form
      </h3>
      <form>
        <div class="form-group ">
          <label for="firstname ">First Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br>
        </div>
        <div class="form-group ">
          <label for="lastname ">Last Name</label>
          <input class="form-control " type="text " id="firstname " , placeholder="John " name="firstname "><br> </div>
        <div class="form-group ">
          <label for="email ">Email</label>
          <input class="form-control " type="text " id="email " placeholder="johndoe@email.com " name="email "><br>
        </div>
        <div class="text-center ">
          <button type="submit " value="Submit ">submit</button>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
...