使用Bootstrap 4，如何在移動/平板電腦視圖中折疊邊欄

Question

我希望在創建可折疊的側邊欄時獲得一些幫助，該側邊欄可以在lg和更高的視圖上展開，但是通過（現在可見）按鈕折疊起來可以在平板電腦和移動設備視圖（md或更小）上展開。

因此，請分解：-如何在移動設備/平板電腦視圖上折疊邊欄？ （xs，md，lg）-需要在桌面視圖中進行擴展（lg，xl）-並且具有一個切換按鈕，該按鈕隱藏在大型桌面視圖中，但顯示在小型移動/平板電腦視圖中。 -我需要寫一些自定義JS嗎？ -這里鏈接的是BS4折疊文檔，但我不知道這將如何完成我需要的工作（ https://getbootstrap.com/docs/4.0/components/collapse/#options ）。 也許一個JS人員可以提供幫助。

謝謝您的幫助！

//The Button
<h4 class="mb-3"><span class="text-muted">Search Filters</span>
    <button class="navbar-toggler border"
    type="button"
    data-toggle="collapse"
    data-target="#sidebar"
    aria-expanded="false"
    aria-label="Toggle filters">
      <span><i class="fas fa-filter"></i></span>
    </button>
 </h4>




//The Sidebar    
  <ul id="sidebar" class="list-group mb-3">
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
    <li class="list-group-item d-flex justify-content-between lh-condensed">
      <div>
        <h6 class="my-0">Header</h6>
        <div class="input-group mb-3">
          <ul>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
            <li><input type="checkbox" aria-label="Checkbox"> Checkbox List Item </li>
          </ul>
        </div>
    </li>
  </ul>
  </div>

Answer 1

好吧，在其他網站上的一些幫助下，我找到了解決方案。 通過鏈接StackOverflow線程 ， Slack Bootstrap幫助通道上的家伙們很友好地將我指向正確的方向。

使用該鏈接以及Bootstrap上的Collapse Documentation，我能夠弄清楚。 以下是答案...

// Used jQuery to create the new logic:

  if ($(window).width() < 922) {
    $('#sidebar').collapse({
      toggle: false
    });
  } else {
    $('#sidebar').collapse({
      toggle: true
    });
  }


// Also, needed to add the .collapse class to the UL:

  <ul id="sidebar" class="collapse list-group mb-3">
      ....
  </ul>

希望這對其他人有幫助！

Answer 2

無需使用JS，使用Bootstrap類： https : //getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

您可以這樣做：

//按鈕：d-lg-none類將隱藏較大尺寸的過濾器（即：僅在xs-s-md尺寸上可見）

<h4 class="d-lg-none mb-3"><span class="text-muted">Search Filters</span>
 <button class="navbar-toggler border"
 type="button"
 data-toggle="collapse"
 data-target="#sidebar"
 aria-expanded="false"
 aria-label="Toggle filters">
  <span><i class="fas fa-filter"></i></span>
</button>
 </h4>



//The Sidebar : "d-none d-lg-block" will display the sidebar only on large size

  <ul id="sidebar" class="d-none d-lg-block list-group mb-3">
....
</ul>