具有可折叠边栏的Bootstrap 4 [英] Bootstrap 4 with collapsible sidebar
本文介绍了具有可折叠边栏的Bootstrap 4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望创建一个可折叠的侧边栏,用户可以对其进行切换.经过大量的游戏,我已经实现了,但是现在,它非常丑陋.这是代码:
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!
推荐答案
有一种简单的方法,您无需使用jQuery.看这个例子:
There is an easy way, you do not need to use jQuery. Look at this example:
<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
.
I've changed data-target
and added a very simple 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>
这篇关于具有可折叠边栏的Bootstrap 4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文