问题：- 我在制作 YouTube 克隆时无法使用切换和折叠属性？
我尝试过的：- 我采用了一个带有容器流体类的 div 容器，在该类中我采用了一个 row 类的 div 容器，该 div 行包含三列，第一列是带有类折叠的 div 和 col-3 大小，这是红色部分，并且第二列是具有 col-1 大小的 div，这是蓝色部分，第三列是具有 col-auto 大小的 div，是绿色部分。我将切换按钮放置在该容器上方的导航栏中。
我的期望：- 1.最初，当我切换按钮时，行容器应显示两列，其中蓝色部分的大小为 col-1，绿色部分的空间为 col-11（自动）。 2.每当我切换菜单按钮时，尺寸为 col-3 的折叠容器（红色部分）应该通过覆盖它而位于蓝色部分的顶部，而绿色部分需要根据红色部分的大小进行调整，即col-9（自动）。
我得到了什么：- 折叠部分（红色部分）不会覆盖蓝色部分，而是自动占据行中的空间，如红色部分（col-3）、蓝色部分（col-1）、绿色部分（col-8）
我希望你们理解我正在经历的问题。请给我一个解决方法。
type here<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Navbar with Toggle</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
col{
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}
</style>
</head>
<body>
<nav class="navbar bg-light border-bottom d-flex ">
<div class="container-fluid d-flex">
<div style="width: 20%;">
<button class="btn btn-light me-2" type="button" data-bs-toggle="collapse" data-bs-target="#toggleSections" aria-expanded="false" aria-controls="toggleSections">
<i class="bi bi-list fs-4"></i>
</button>
<label for=""><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
<span class="fs-5 fw-bold">YouTube</span>
</div>
<div class="d-flex " style=" width: 65%">
<form class=" d-flex " style="width: 100%;" >
<label class="d-flex border rounded-circle" style="width: 70%;">
<input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light border-0" ><i class="bi bi-search"></i></button>
</label>
<button class="btn btn-light me-3 border-0 rounded-circle">
<i class="bi bi-mic fs-5"></i>
</button>
</form>
</div>
<div style="width: 15%;">
<button class="btn btn-light border rounded-pill">
<i class="bi bi-plus"> Create</i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-bell fs-5"></i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-google"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid border" style="background-color: lightblue;">
<div class="row border" style="background-color: yellowgreen; height: 100px; position: relative;">
<div class=" col-3 collapse position-relative" style="background-color: red; margin: 4px;" id="toggleSections"></div>
<div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;"> column1</div>
<div class="col-auto d-flex align-items-center justify-content-center flex-grow-1" style="background-color:green; margin: 4px;"> column3</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
您必须使用
collapse文档）而不是使用
offcanvas，这是更正后的代码：
.col{
padding: 1rem;
background-color: blue;
color: white;
border: 2px solid black;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar bg-light border-bottom d-flex ">
<div class="container-fluid d-flex">
<div style="width: 20%;">
<button class="btn btn-light me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
<i class="bi bi-list fs-4"></i>
</button>
<label for=""><i class="bi bi-youtube fs-2" style="color: red;"></i></label>
<span class="fs-5 fw-bold">YouTube</span>
</div>
<div class="d-flex " style=" width: 65%">
<form class=" d-flex " style="width: 100%;" >
<label class="d-flex border rounded-circle" style="width: 70%;">
<input class="form-control border-0" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-light border-0" ><i class="bi bi-search"></i></button>
</label>
<button class="btn btn-light me-3 border-0 rounded-circle">
<i class="bi bi-mic fs-5"></i>
</button>
</form>
</div>
<div style="width: 15%;">
<button class="btn btn-light border rounded-pill">
<i class="bi bi-plus"> Create</i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-bell fs-5"></i>
</button>
<button class="btn btn-light border-0 rounded-circle">
<i class="bi bi-google"></i>
</button>
</div>
</div>
</nav>
<div class="container-fluid border" style="background-color: lightblue;">
<div class="row border" style="background-color: yellowgreen; height: 100px; position: relative;">
<div class="col-1 d-flex align-items-center justify-content-center" style="background-color: blue; margin: 4px;"> column1</div>
<div class="col-auto d-flex align-items-center justify-content-center flex-grow-1" style="background-color:green; margin: 4px;"> column3</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>