Разделить боковую панель на верхний и нижний колонтитулы в Bootstrap 4 - PullRequest
Новая
       1

Разделить боковую панель на верхний и нижний колонтитулы в Bootstrap 4

0 голосов
/ 17 декабря 2018

Структура сайта в настоящее время выглядит следующим образом:

index.html: 

<!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="css/bootstrap.css">

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

    <!-- Own styles -->
    <link rel="stylesheet" href="css/styles.css">

    <title>My website</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
                <img src="images/avatar.jpg" class="rounded-circle">
                <h3 class="text-light">John Doe</h3>
                <h5 class="text-light">programmer</h5>
                <p class="text-muted mt-5 mb-0">123 456 789</p>
                <p class="text-muted">test@test.com</p>
                <p class="mt-5 text-white">
                    <a href="#" class="text-white mr-1">Language 1</a>
                    |
                    <a href="#" class="text-white ml-1">Language 2</a>
                </p>
                <p class="social">
                    <a href="#" class="text-white mr-1"><i class="fab fa-facebook-f"></i></i></a>
                    <a href="#" class="text-white ml-1"><i class="fab fa-twitter"></i></i></a>
                </p>
                <p class="text-muted">&copy; Someone | 2015 - 2019</p>
            </div>
            <div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
                <p>Content</p>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery.js"></script>
    <script src="js/popper.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

styles.css: 

@media (max-width: 767.98px) {
    .sidebar {
        height: auto !important;
        padding-top: 10px;
        padding-bottom: 10px;
        position: static;
    }
}

.sidebar {
    background-color: #9DB9E8;
    height: 100vh;
}

На устройствах с классом md и менее Я хочу разбить боковую панель слева на две части.Первая часть должна быть в верхней части страницы только со следующими строками кода: 

<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>

Вторая часть должна быть в нижней части страницы (под div с классом content) и содержать все остальныестроки кода с боковой панели.Обе части должны иметь те же стили, что и боковая панель.

Как мне добиться этого в Bootstrap 4 ?

1 Ответ

0 голосов
/ 17 декабря 2018

Чтобы сделать это, вы должны разделить их на две части.

<div id="section1">
(what ever you want in 1st section.)
</div>

<div id="section2">
(whatever you want in 2nd section.)
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...