twitter-bootstrap - 仅在移动 View 上折叠 DIV - Bootstrap 3

Question

我有一个侧边栏搜索参数。我只想在移动设备上对此 DIV 进行折叠功能。使用 Bootstrap 3 - 最新版本。

这是 HTML 标记。

<div class="col-md-3 col-sm-4 SearchParameters">
            <h4 data-toggle="collapse" data-target="#search">Location</h4>
            <div class="col-md-12 sCheck no-gutter collapse" id="search">
                <h5>Lahore (254)</h5>
                <div class="col-md-12">
                    <form role="form">
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="ModelTown">
                            <label for="ModelTown">Model Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="DHA">
                            <label for="DHA">DHA</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="CG">
                            <label for="CG">Cavalry Ground</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Gulberg">
                            <label for="Gulberg">Gulberg</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Samnabad">
                            <label for="Samnabad">Samnabad</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="AIT">
                            <label for="AIT">Allama Iqbal Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="GardenTown">
                            <label for="GardenTown">Garden Town</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="Township">
                            <label for="Township">Township</label>
                        </div>
                        <div class="checkbox checkbox-primary">
                            <input type="checkbox" id="FaisalTown">
                            <label for="FaisalTown">Faisal Town</label>
                        </div>
                        <a href="#">20 more locations</a>
                    </form>
                </div><!-- form-group -->
                <div class="clearfix"></div>
                <h5 class="second">Availability</h5>

                <div class="col-md-12 SelectDays">
                    <a href="#" class="Day">M</a>
                    <a href="#" class="Day">T</a>
                    <a href="#" class="Day active">W</a>
                    <a href="#" class="Day">Th</a>
                    <a href="#" class="Day">F</a>
                    <a href="#" class="Day">S</a>
                    <a href="#" class="Day">SU</a>
                </div><!-- SelectDays -->

                <div class="col-md-12 TimeSet">
                    <!-- timeFunction -->
                </div><!-- TimeSet -->

            </div><!-- col-md-12 -->
        </div><!-- SearchParameters -->

我用来为代码提供样式的 SearchParameters DIV。

注意:我只想在移动设备上折叠“SearchParameters”div，然后用按钮打开它。应该只有 1 个 div。我可以隐藏这个 div 并显示另一个在移动设备上可见的 div，但这不是一个好方法。我想折叠此 div 并仅在移动设备上单击按钮时显示它。

Answer 1

你可以这样做:

<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button>

<div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters">
...

CSS:

#SearchParameters.in,
#SearchParameters.collapsing {
    display: block!important;
}