Я не могу успешно использовать «ряд по вертикали». Bootstrap / HTML - PullRequest
Новая
       5

Я не могу успешно использовать «ряд по вертикали». Bootstrap / HTML

1 голос
/ 07 апреля 2020

Я создаю страницу входа (Python / Flask), и форма входа будет единственным элементом, отображаемым на этой странице. Я хочу, чтобы эта форма была центрирована как горизонтально, так и вертикально. Мне удалось отцентрировать его по горизонтали, но я не могу определить вертикальное выравнивание.

Я нашел этот полезный ответ -> по вертикали с Bootstrap 3 , но мой мозг просто не может его понять.

Я также не уверен, правильно ли я ссылаюсь на основной файл. css, и совершенно не уверен, как ссылаться на контактор внутри магистрали. css для выравнивания по вертикали.

Моя файловая структура: 

________________________________
|Flask -
|      |_flask_app.py
|      |_static_
|               |_css_
|                     |_main.css
|               |_images_
|                        |...
|      |_templates_
|                  |_index.html
|                  |_login.html
________________________________

Вот мой HTML: 

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

    <head>
        <title>LoginPage</title>
        <meta charset="utf-8">

        <!-- For rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row vertivcal-align">
                <div class="col-xs-12"></div>
                    <div class="span12 text-center">
                        <h1>Please login</h1>
                        <br>
                        <form action="" method="post">
                            <input type="text" placeholder="Username" name="username" value="{{
                            request.form.username }}">
                            <input type="password" placeholder="Password" name="password" value="{{
                            request.form.password }}">
                            <input class="btn btn-default" type="submit" value="Login">
                        </form>
                        {% if error %}
                            <p class="error"><strong>Error:</strong> {{ error }}
                        {% endif %}
                    </div>
                </div>    
            </div>
        </div>
    </body>
</html>

А вот мой главный. css

.container {
    width: 1200px;
    margin: 0 auto;
  }

.vertical-align {
    display: flex;
    align-items: center;
}

1 Ответ

1 голос
/ 07 апреля 2020

Вы можете использовать следующее CSS и добавить класс m-auto к вашему div span12

.vertical-align {
    height:100vh
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="row vertical-align">
            <div class="col-xs-12"></div>
                <div class="span12 text-center m-auto">
                    <h1>Please login</h1>
                    <br>
                    <form action="" method="post">
                        <input type="text" placeholder="Username" name="username" value="">
                        <input type="password" placeholder="Password" name="password" value="">
                        <input class="btn btn-default" type="submit" value="Login">
                    </form>
                </div>
            </div>    
        </div>
...