您好，下面的代码生成了一个带有一些lorem文本和侧栏的引导页面，但是当浏览器窗口的大小变小时，它会出现在文档的底部，而不是侧边，当分辨率很小时，它会被隐藏起来，这是为了在中等分辨率时，如何使它出现在侧边？
null
.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>null
如果要将其隐藏在small上，请删除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>
如果要在small的侧面显示，请将外列断点从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://codepley.com/p/wyzu1ebafq
注意:Bootstrap 4或Bootstrap 5中没有-xs-中缀，因此col-xs-*类没有执行任何操作。此外，引导程序5不需要jQuery。
