Bootstrap 4与可折叠侧边栏

Question

我希望创建一个可折叠的侧边栏，用户可以切换。经过多次尝试，我已经实现了它，但是目前看起来非常丑陋。以下是代码：（点击此处查看）

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

这样做的问题在于，折叠是垂直的，一旦折叠，内容就不会变成全宽！

- J86

---

您可以使用Ionic框架。它内置了导航和许多其他组件。 - Kishori

Answer 1

有一个简单的方法，不需要使用jQuery。看看这个例子：

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

我已经更改了data-target并添加了一个非常简单的onclick。

编辑：

进一步改进：

<div class="container-fluid">
  <div class="row d-flex">
    <nav class="col-md-3 collapse show width" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

- Lajos Arpad

---

谢谢@Lajos，看到更新的问题了。我设法让它工作了，但不是很好的方式。 - J86

如何使侧边栏可以水平和垂直滚动？谢谢！ - NacDan

@NacDan，您可以使用CSS来实现这一点，请查看overflow-x和overflow-y CSS属性，以使您打算滚动的div可滚动。 - Lajos Arpad