- 首页
- 其他开发
- 仅在移动视图上折叠 DIV - Bootstrap 3
仅在移动视图上折叠 DIV - Bootstrap 3
[英] Collapse DIV only on Mobile View - Bootstrap 3
本文介绍了仅在移动视图上折叠 DIV - Bootstrap 3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个侧边栏搜索参数.我只想在移动设备上对这个 DIV 进行折叠功能.使用 Bootstrap 3 - 最新版本.
这是 HTML 标记.
<h4 data-toggle="collapse" data-target="#search">位置</h4><div class="col-md-12 sCheck no-gutter collapse" id="search"><h5>拉合尔 (254)</h5><div class="col-md-12"><表单角色=表单"><div class="checkbox checkbox-primary"><input type="checkbox" id="ModelTown"><label for="ModelTown">Model Town</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="DHA"><label for="DHA">DHA</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="CG"><label for="CG">Cavalry Ground</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="Gulberg"><label for="Gulberg">Gulberg</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="Samnabad"><label for="Samnabad">Samnabad</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="AIT"><label for="AIT">Allama Iqbal Town</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="GardenTown"><label for="GardenTown">Garden Town</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="Township"><label for="Township">Township</label>
<div class="checkbox checkbox-primary"><input type="checkbox" id="FaisalTown"><label for="FaisalTown">Faisal Town</label>
<a href="#">另外 20 个地点</a></表单></div><!-- 表单组--><div class="clearfix"></div><h5 class="second">可用性</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><!-- 时间集--></div><!-- col-md-12 --></div><!-- 搜索参数-->
我用来为代码设置样式的 SearchParameters DIV.
注意:我只想在移动设备上折叠SearchParameters"div 并用按钮打开它.应该只有 1 个 div.我可以隐藏这个 div 并显示另一个在移动设备上可见的 div 但这不是一个好方法.我想折叠这个 div 并仅在移动设备上点击按钮时显示它.
解决方案
你可以这样做:
<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">切换它</button><div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters">...
CSS:
#SearchParameters.in,#SearchParameters.collapsing {显示:阻止！重要；}
I have a sidebar search parameters. I want to make collapse function on this DIV only on Mobile device. Using Bootstrap 3 - Latest version.
Here is the HTML Markup.
<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 -->
The SearchParameters DIV I use to give styling to the code.
Note : I want to collapse "SearchParameters" div only on mobile and opened it with a button.. There should be only 1 div. I can hide this div and show another div which is visible on mobile devices but that's not a good approach. I want to collapse this div and show it on button click only on mobile devices.
解决方案
You could do it this way:
<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;
}
这篇关于仅在移动视图上折叠 DIV - Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
