Javascript Bootstrap3：如何使用两个非画布侧边栏？

我有一个模板，最初显示： 侧边栏1-内容-侧边栏2

但是当用户在移动视图中时，我需要消失两个侧栏，并且可以通过按钮打开，一次一个

按钮1-向右打开侧边栏1。 按钮2-打开左侧的侧边栏2

有人知道这是可能的还是已经做到了

代码

---

让我们试一试。。。我在当前HTML的底部添加了一个新行，以表示在边缘上显示但在切换按钮之前隐藏的相同链接。让我们先看一下HTML：

HTML

它实际上与您使用的代码相同，但我现在可以切换隐藏内容

结论: 我还添加了一些其他功能，比如当屏幕缩小到较小尺寸时，可以隐藏两侧的导航栏。只要看一下我将通过JSFIDLE提供的代码，您就会更好地理解它

我喜欢这样：

HTML

---

有了Bootstrap提供的CSS，您只需切换到即可切换侧边栏的哪一侧。我已经知道了。谢谢。看一看妈妈的回答，看看它是否有用，如果没有，让我们看看我们是否可以调整一些东西。嗨，这对我不起作用。。我需要向左拉->侧边栏1。。你想把它放在jumbotron？谢谢你的帮助。但是，我发现了如何修复它！很好，为将来关注这个问题的人展示一个JSFIDLE

        <div class="container">

        <div class="row row-offcanvas row-offcanvas-right">

            <div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <div class="list-group">
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/span-->


            <div class="col-xs-12 col-sm-6">
                <p class="pull-left visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
                        Filters <i class="fa fa-arrow-right"></i>
                    </button>
                </p>

                <p class="pull-right visible-xs">
                    <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
                        <i class="fa fa-arrow-left"></i>
                        Details</button>
                </p>

                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
                </div>

            </div><!--/span-->

            <div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                <div class="list-group">
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                    <a href="#" class="list-group-item">Link</a>
                </div>
            </div><!--/span-->
        </div><!--/row-->


    </div>

    $('[data-toggle=offcanvas]').click(function () {
    $('.row-offcanvas').toggleClass('active');
});

    $('[data-toggle=offcanvas1]').click(function () {
    $('.row-offcanvas').toggleClass('active');
});

<div class="row">
            <div class="col-xs-3 col-sm-3  sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
            <div class="list-group"> <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>

            </div>
        </div>
    <div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
            <div class="list-group"> <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>
 <a href="#" class="list-group-item">Link</a>

            </div>
        </div>

</div>

$('[data-toggle=offcanvas]').click(function () {
    $('.trial2').toggleClass('hide');
});

$('[data-toggle=offcanvas1]').click(function () {
    $('.trial').toggleClass('hide');
});

<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">

    <div id="filters"></div>

    <div id="content">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">

                <ul class="nav navbar-nav nav-pills">
                    <li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
                    <li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
                </ul>
            </div>
        </nav>
    </div>

    <div id="detail"></div>

</div>

$('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas-left').toggleClass('active');
});

    $('[data-toggle=offcanvasa]').click(function() {
    $('.row-offcanvas-right').toggleClass('active');
});