在 Bootstrap 4 中将侧边栏拆分为页眉和页脚答案

【问题标题】：Split sidebar to header and footer in Bootstrap 4在 Bootstrap 4 中将侧边栏拆分为页眉和页脚
【发布时间】：2018-12-18 09:18:04
【问题描述】：

网站结构目前如下所示：

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 和 less 类的设备上，我想将左侧的侧边栏分成两部分。第一部分应位于页面顶部，仅包含以下代码行：

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

第二部分应该在页面的底部（在类content 的div 下）并包含来自侧边栏的所有剩余代码行。两个部分都应该与侧边栏具有相同的样式。

如何在 Bootstrap 4 中实现这一点？

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

为此，您应该将它们分成两个 div。

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

<div id="section2">
(whatever you want in 2nd section.)
</div>

【讨论】：

你能举个例子吗？
这如何解决我的问题？你甚至读过我的问题吗？
是的，我想要。