twitter-bootstrap – 仅在Mobile View – Bootstrap上折叠DIV 3
发布时间:2020-12-18 00:18:18 所属栏目:安全 来源:网络整理
导读:我有一个侧边栏搜索参数.我想在这个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 sChe
我有一个侧边栏搜索参数.我想在这个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,并在按钮点击只显示在移动设备上. 解决方法
你可以这样做:
<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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |