CSS/Bootstrap - 站点侧边栏更改为移动设备上的导航栏

Question

我在管理面板中自己创建的侧边栏有问题。它在桌面上运行良好，但我希望在移动设备上它应该将位置更改为顶部。

此时它看起来像这样： LINK

 <div class="col-3" id="sticky-sidebar">
    <div class="sticky-top">
        <div class="card-body"  align="center">
            <h4>Admin Panel</h4>

        <div class="nav flex-column" align="center">
            <div class="sidebar-menu-header">
                <h5>Site</h5>
            </div>
            <button class="btn btn-outline-dark nav-link btn-admin active">Statystyki cmentarza</button>
            <button class="btn btn-outline-light nav-link btn-admin dropdown-btn" data-toggle="dropdown">Osoby pochowane</button>
            <div class="dropdown-container">
                <a class="nav-link" href="#">Ewidencja osób</a>
                <a class="nav-link" href="#">Dodaj zmarłego</a>
            </div>
        </div>
        </div>
    </div>
</div>

我使用 class - sticky-top 在现场获取它。我知道如果我使用这样的东西：

    @media(max-width: 650px){
  #sticky-sidebar{display: none;}
}

它应该隐藏它。不管怎样，当它在小屏幕上时，我想将它移动到导航栏下方的网站顶部。

Answer 1

它可以工作并隐藏它，您可以创建一个仅在 650px 下显示的新导航栏

#my-new-navbar {
  display: block;
}
@media screen and (min-width: 650px){
  #my-new-navbar{display: none;}
}

或者您可以使用 col-md-3，默认情况下您的导航栏采用 100% 宽度。

<div class="col-md-3" id="sticky-sidebar">
    ...
</div>