标签 html css bootstrap-4
<分区>
我希望创建一个用户可以切换的可折叠侧边栏。玩了很久，终于实现了，但是right now, it is very ugly .这是代码:
<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>
问题是，折叠是垂直的，然后一旦折叠，内容就不会全宽了!
最佳答案
有一个简单的方法，你不需要使用 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>
关于html - 带有可折叠侧边栏的 Bootstrap 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46562942/