我有一个侧边栏搜索参数.我想在这个DIV上仅在移动设备上进行崩溃功能.使用Bootstrap 3 – 最新版本.
<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,并在按钮点击只显示在移动设备上.
解决方法
你可以这样做：
<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;
}