Question

当前的网站结构如下：

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>

第二部分应位于页面底部（位于类为content的div下），并包含侧边栏中的所有其余代码行。这两部分的样式应与边栏相同。

如何在 Bootstrap 4 中实现这一目标？

Answer 1

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

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

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

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

1 个答案: