Вертикально-центрированная проблема с бустером - PullRequest
Новая
       1

Вертикально-центрированная проблема с бустером

0 голосов
/ 02 сентября 2018

Итак, у меня есть простой веб-сайт с панелью навигации, нижним колонтитулом и вертикально центрированным контейнером, где я пытаюсь разместить текст приветствия и пару кнопок. По какой-то причине я не могу разделить различные элементы (текст и кнопки) на новые строки. Я хочу, чтобы в одной строке был текст, а затем в следующей строке 2 кнопки.

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

HTML 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Home</title>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
        <link href="assets/css/style.css" rel="stylesheet">
    </head>

    <body>
        <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
            <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
            <div class="navbar-nav-scroll">
                <ul class="navbar-nav bd-navbar-nav flex-row">
                    <li class="nav-item">
                        <a class="nav-link" href="./">Home</a>
                    </li>
                </ul>
            </div>
        </header>

        <main>
            <div class="container-fluid welcome-container">
                <div>Welcome to the website!</div>
                <br/>
                <a class="btn btn-dark" href="./">Button 1</a>
                <a class="btn btn-dark" href="./">Button 2</a>
            </div>
        </main>

        <footer class="footer bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-center text-white">Footer</div>
                    </div>
                </div>
            </div>
        </footer>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

CSS 

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.welcome-container {
    min-height: 80%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-pack: center;
}

Любая помощь будет высоко ценится. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Друг помог мне с этим. Все, что мне нужно было сделать, это поместить содержимое контейнера приветствия в отдельный div, а затем добавить класс к этому div с помощью text-align: center.

0 голосов
/ 02 сентября 2018 

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Home</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to the website!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Button 1</a>
                    <a class="btn btn-dark" href="./">Button 2</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">Footer</div>
                        </div>
                    </div>
                </div>
            </footer>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        </body>
    </html>

Проверьте это решение 

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Home</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to the website!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Button 1</a>
                    <a class="btn btn-dark" href="./">Button 2</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">Footer</div>
                        </div>
                    </div>
                </div>
            </footer>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...