如何修复在较小分辨率下出现在文档底部的边栏

Question

您好，下面的代码会生成一个 Bootstrap 页面，其中包含一些 lorem 文本和一个侧边栏，但是当浏览器 window 的尺寸变小时，它会出现在文档底部而不是侧面并且在非常小的分辨率下它会隐藏，这是为了在中等分辨率下如何让它出现在旁边？

.sidebar-user-box {
    padding: 4px;
    margin-bottom: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
}

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Page style -->
    <link rel="stylesheet" href="CSS/index.css">

    <!-- Title -->
    <title>Social Media Site</title>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Social Media Site</a>
            <div class="d-flex align-items-center">
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>

                        <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>

                        <div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
                                in?
                            </p>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
                    </div>
                </div>
            </main>

            <nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
                <div class="sidebar-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item sidebar-user-box" id="1">
                            <span id="slider-username">User</span>
                        </li>
                        <li class="nav-item sidebar-user-box" id="2">
                            <span id="slider-username">User (2)</span>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</body>

</html>

Answer 1

如果你想隐藏它在小，删除d-sm-block..

    <nav class="col-lg-2 col-md-3 d-none d-md-block bg-dark sidebar">
        <div class="sidebar-sticky">
            <ul class="nav flex-column">
                <li class="nav-item sidebar-user-box" id="1">
                    <span id="slider-username">User</span>
                </li>
                <li class="nav-item sidebar-user-box" id="2">
                    <span id="slider-username">User (2)</span>
                </li>
            </ul>
        </div>
    </nav>

如果你想显示它在小的一侧，将外列断点从col-md-*更改为col-sm-*..

<div class="container-fluid">
    <div class="row">
        <main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
            <div class="container-fluid">
                <div class="row">
                    ...
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    ...
                </div>
            </div>
        </main>
        <nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item sidebar-user-box" id="1">
                        <span id="slider-username">User</span>
                    </li>
                    <li class="nav-item sidebar-user-box" id="2">
                        <span id="slider-username">User (2)</span>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

https://codeply.com/p/WyZu1eBAfQ

注意：Bootstrap 4 或 Bootstrap 5 中没有 -xs- 中缀，因此 col-xs-* 类什么都不做。此外，Bootstrap 不需要 jQuery 5.

如何修复在较小分辨率下出现在文档底部的边栏

How to fix my sidebar appearing at the bottom of the document on smaller resolutions

html

javascript

css

bootstrap-5