我试图创建一个侧边栏收缩影响，当你折叠侧边栏使用自定义CSS，jQuery，和Bootstrap。我的自定义CSS和jQuery正在处理收缩影响，Bootstrap仅用于样式化。出于某种原因，边栏中的一些元素在收缩折叠后不会消失或隐藏。我在下面的代码中给出了一个剥离的例子。一些图像作为例子。
知道为什么会这样吗
图像（之前和之后）：
代码：
<!doctype html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
<style>
/* Styling when the Sidebar is open to apply the 'shrink' effect. */
.not-bs-sidebar {
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
/* Styling to make the Main area fill the page when the Sidebar is collapsed. */
.not-bs-main {
flex: 1;
}
/* Styling to collapse the Sidebar. */
.not-bs-sidebar.active {
width: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="container-fluid">
<div class="row">
<div class="col-md-2 bg-primary not-bs-sidebar" id="sidebar" style="padding-top: 50px;">
<h1>WTF! Why won't this hide?</h1>
</div>
<div class="col-md-10 not-bs-main" id="main">
<div class="row not-bs-header bg-dark">
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button type="button" class="btn btn-primary" id="ButtonCollapse">
<i class="bi bi-justify"></i>
</button>
</nav>
</div>
</div>
<div class="row not-bs-body">
<div class="col" style="height: 400px;">
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#ButtonCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
})
});
</script>
</body>
</html>
1条答案
按热度按时间v2g6jxz61#
试着更新这个：
这是：