如何自動折疊Bootstrap 4側欄以顯示較小的屏幕？

Question

這是我當前的代碼，我已經設法通過折疊按鈕隱藏了側邊欄，但是我只希望它像小型設備的navbar那樣在小型設備上折疊。

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 px-1 bg-light" id="sidebar"> <div class="py-2 sticky-top flex-grow-1"> <div class="nav flex-sm-column"> <h2 class="text-center">PROFILE</h2> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse" aria-expanded="true" aria-controls="collapse">Toggle both elements</button> <div class="collapse navbar-collapse"> <a href="" class="nav-link">LINK</a> <a href="" class="nav-link">LINK</a> <a href="" class="nav-link">LINK</a> </div> </div> </div> </div> <div class="col-sm-9" id="main"> ***PAGE DATA </div> </div> </div> </div> 

Answer 1

您可以使用媒體查詢來執行此操作：

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

Answer 2

我認為，如果您使用此功能，將有助於解決您的問題。 您可以從這里了解更多W3SCHOOLS

   @media only screen and (min-width: 320px) and (max-width: 768px) {
  .nav {
    width:100%;
  }
  .nav-link {
    width:100%;
    float:none;
  }
}

Answer 3

這就是您要尋找的。 上面其他人寫的東西可以工作，但是比僅僅使用引導分類更難。

https://getbootstrap.com/docs/4.1/utilities/display/