如何为小屏幕自动折叠 Bootstrap 4 侧边栏？答案

【问题标题】：How to auto collapse Bootstrap 4 Sidebar for smaller screens?如何为小屏幕自动折叠 Bootstrap 4 侧边栏？
【发布时间】：2019-05-15 02:39:51
【问题描述】：

这是我当前的代码，我已经设法用折叠按钮隐藏侧边栏，但我希望它只在小型设备上折叠，就像引导导航栏一样。

<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>

【问题讨论】：

标签： html css bootstrap-4 responsive sidebar

【解决方案1】：

这就是你要找的。其他人在上面写的会起作用，但它比仅仅使用引导类更难。

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

【讨论】：

【解决方案2】：

我认为如果您使用它，它将有助于解决您的问题。您可以从这里了解更多信息W3SCHOOLS

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

【讨论】：

【解决方案3】：

您可以使用媒体查询来执行此操作：

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

【讨论】：