bootstrap 搜索网站的样式和界面问题

Question

在过去的几天里，我一直在尝试使用 bootstrap、php、html、css 和 js 为网站编写搜索界面。我制作了一个可在移动设备上折叠的功能性顶部栏，但我的侧边栏只是一个 div，而不是导航元素，我不知道如何以这种方式使其发挥作用：我希望它占据我屏幕的一部分左侧在桌面上不可折叠，但在移动设备上它应该占据大约一半，可以通过底部的按钮折叠并且不会推送任何内容，而是覆盖在其余页面内容上。这是到目前为止的侧边栏代码：

        <div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <button class="btn btn-primary d-block d-md-none" type="button" data-toggle="collapse" data-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
        Toggle Sidebar
      </button>
      <div class="sidebar collapse d-md-block" style="margin-top: 58px;" id="sidebar">
Sort by
<h2>Filters</h2>


  <div class="card card-body">
  <b data-toggle="collapse" href="#filter1" role="button" aria-expanded="false" aria-controls="collapseExample">
    Filter 1
</b>
  <div id="filter1">
  <input type="checkbox" id="filter1_checkbox1"name="filter1_checkbox1">
  <label for="filter1_checkbox1">Checkbox 1</label><br>
  <input type="checkbox" id="filter1_checkbox2"name="filter1_checkbox2">
  <label for="filter1_checkbox2">Checkbox 2</label><br>
  <input type="checkbox" id="filter1_checkbox3"name="filter1_checkbox3">
  <label for="filter1_checkbox3">Checkbox 3</label><br>
  </div>
</div>
<div class="card card-body">
  <b data-toggle="collapse" href="#filter2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Filter 2
</b>
  <div id="filter2">
  <input type="checkbox" id="filter2_checkbox1"name="filter2_checkbox1">
  <label for="filter1_checkbox1">Checkbox 1</label><br>
  <input type="checkbox" id="filter2_checkbox2"name="filter2_checkbox2">
  <label for="filter1_checkbox2">Checkbox 2</label><br>
  <input type="checkbox" id="filter2_checkbox3"name="filter2_checkbox3">
  <label for="filter1_checkbox3">Checkbox 3</label><br>
  </div>
</div>

      </div>
    </div>

在这里，它只占据了屏幕的 2 部分，在桌面上看起来不错，但是一旦我将它折叠到移动设备上，显示侧边栏的按钮就不存在了，而且它太小了。谢谢你们的帮助，我希望我已经解释清楚了。