【发布时间】：2021-10-20 04:25:56
【问题描述】：
Offcanvas 侧边栏组件，例如 Halfmoon UI。我尝试使用 Offcanvas 组件和侧边栏示例制作一个，但失败了。这是 Halfmoon UI 侧边栏的实时示例，它在中等屏幕上展开。
-
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" data-bs-keyboard="false" data-bs-backdrop="false" aria-labelledby="offcanvasExampleLabel"> <div> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">Ricerca Layer</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <div id="sidebar"> <div class="nav flex-column py-3"> <ul class="list-unstyled ps-0"> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false"> Home </button> <div class="collapse" id="home-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">Overview</a></li> <li><a href="#" class="link-dark rounded">Updates</a></li> <li><a href="#" class="link-dark rounded">Reports</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> Dashboard </button> <div class="collapse" id="dashboard-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">Overview</a></li> <li><a href="#" class="link-dark rounded">Weekly</a></li> <li><a href="#" class="link-dark rounded">Monthly</a></li> <li><a href="#" class="link-dark rounded">Annually</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> Orders </button> <div class="collapse" id="orders-collapse" > <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">New</a></li> <li><a href="#" class="link-dark rounded">Processed</a></li> <li><a href="#" class="link-dark rounded">Shipped</a></li> <li><a href="#" class="link-dark rounded">Returned</a></li> </ul> </div> </li> <li class="border-top my-3"></li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> Account </button> <div class="collapse" id="account-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">New...</a></li> <li><a href="#" class="link-dark rounded">Profile</a></li> <li><a href="#" class="link-dark rounded">Settings</a></li> <li><a href="#" class="link-dark rounded">Sign out</a></li> </ul> </div> </li> </ul> </div> </div> <div class="dropdown mt-3"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> More </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div> <div class="container min-vh-100 py-2"> <div class="row"> <div class="col"> <h2 class="font-weight-light">Hello Bootstrap 5 Sidebar</h2> <p> A Bootstrap 5 left off-canvas sidebar menu example! </p> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> Open Sidebar </button> </div> <div class="col"> </div> </div> </div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <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>
导航栏
<nav class="navbar" style="background-color: #00A8B0;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">APP.IT</a>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="bi bi-list me-3"></i>
</a>
<a class="navbar-brand" style="color: #00A8B0;">APP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
<maga-profilo-utente></maga-profilo-utente>
</div>
</nav>
【问题讨论】：
-
您的问题是什么？你到底尝试了什么。请发布代码，而不是图片。
-
我正在尝试制作一个像有角材料但使用 boostrap (offcanvas) 的抽屉
标签： angular typescript twitter-bootstrap bootstrap-4 sass