侧边栏没有响应

Question

我的侧边栏目前有 2 个问题。

1. 上部在移动设备上被切断。
2. 侧边栏默认在移动设备上展开。 不应该是这样的。 并且当它被折叠时，页面的内容不会向左移动。 但是，内容应该向左移动。

我使用引导程序 5。

 .sidebar { position: fixed; top: 0; bottom: 0; left: 0; padding: 45px 0 0; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%); width: 220px; }.sidebar.active { border-radius: 5px; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); } @media (max-width: 767px) {.main { padding-right: 40px; padding-left: 220px; /* 180 + 40 */ } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <div class="container-fluid"> <div class="col-md-12 col-sm-12"> <div class="row"> <div class="col-md-4 col-sm-4"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar"> <div class="position-sticky pt-3"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}"> <span data-feather="home"></span> Test </a> <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}"> <span data-feather="home"></span> Test </a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#"> <span data-feather="file"></span> Test </a> <a class="nav-link" aria-current="page" href="#"> <span data-feather="file"></span> Test </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="file-plus"></span> Test </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="users"></span> Test </a> </li> </ul> </div> </nav> </div> <div class="col-md-8 col-sm-8"> {% block body %}{% endblock %} </div> </div> </div> </div>

Answer 1

您可以使用 CSS 媒体查询来根据屏幕大小确定要执行的操作。 在这里，您可能希望根据屏幕大小更改侧边栏的位置/大小。

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}

编辑：

我刚刚看到您已经有媒体查询。 不过，尝试更改大小和 position ，而不仅仅是填充。