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

好吧，在其他网站上有一些帮助我找到了解决方案。 Slack Bootstrap帮助频道的那些人非常友好地通过链接StackOverflow thread向我指明正确的方向。

使用该链接以及Bootstrap的折叠文档，我能够弄明白。以下是答案......

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

使用Bootstrap 4，如何在移动/平板电脑视图中折叠侧边栏

2 个答案: