Bootstrap列将在移动设备上滑入

Question

我有一个col-lg-3 col-lg-9布局，当我在手机上访问时，我希望col-lg-3是滑入式菜单（意思是col-sm-3和col-xs-3 ）。

我希望页面左侧有一个按钮，上面写着“菜单”，当我点击它时，菜单就会滑入

这仅适用于col-sm-3和col-xs-3布局。

有关于此的任何建议吗？

这是我的代码

<div class="container">
    <aside class="col-lg-3 col-md-3">
        <div id="filters">
            this should be slide in when on mobile
        </div>
    </aside>
    <div class="col-lg-9 col-md-9">
        body
    </div>
</div>

Answer 1

修改

我忘记了滑动的事情，现在已经完成了： JS Fiddle

代码：

<强> JQuery的

$(document).ready(function () {
    $('#slide').hide();
});

$('#slide_button').click(function () {
    $('#slide').slideToggle('slow');
});

<强> HTML

<div class="container">
    <aside class="col-lg-3 col-md-3">
        <div id="filters" class="col-lg-12 col-md-12 hidden-xs hidden-sm">
        <!-- Other content -->
        </div
        <div class="hidden-lg hidden-md col-xs-12 col-sm-12 text-center">
            <button id="slide_button">Slide it</button>
            <div id="slide">I'm some sliding content</div>
        </div>
    </aside>
    <div class="col-lg-9 col-md-9"></div>
</div>