CSS 带有可折叠侧边栏的 Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46562942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 with collapsible sidebar
提问by J86
I wish to create a collapsible sidebar that the user can toggle. After much playing, I have achieved it, but right now, it is very ugly. Here's the code:
我希望创建一个用户可以切换的可折叠侧边栏。玩了很多次后，我已经实现了，但是现在，它很丑陋。这是代码：
<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>
The issue with this is, the collapsing is vertical, and then once collapse, the content doesn't go full width!
问题是，折叠是垂直的，然后一旦折叠，内容就不会全宽！
采纳答案by Lajos Arpad
There is an easy way, you do not need to use jQuery. Look at this example:
有一个简单的方法，您不需要使用 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>
I've changed data-targetand added a very simple onclick.
我已经更改data-target并添加了一个非常简单的onclick.
EDIT:
编辑：
Further improvements:
进一步改进：
<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>
