如何在移动 中隐藏 Bootstrap 模式。我尝试使用修饰符类,例如 hidden-xs hidden-sm 但失败了。模态框将转到底部页面,使顶部页面无法访问。
这是我的代码:
<div class="modal fade hidden-xs hidden-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:1em;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="banner.jpg" height="388" width="558" alt="" class="img-rounded">
</div>
<div class="modal-footer" style="border:0">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
由于 hidden-xs 和 hidden-sm 失败,我尝试更改我的 css:
@media only screen and (max-device-width: 480px){
#myModal{display: none;}
}
或
@media only screen and (max-device-width: 480px){
.modal{display: none;}
}
但是,他们也失败了。
最佳答案
您的媒体查询已被 jQuery 覆盖。用 jQuery 试试。
像这样:
$('#myModal').on('shown.bs.modal', function () {
var width = $(window).width();
if(width < 480){
$(this).hide();
}
});
关于twitter-bootstrap - 在移动设备中隐藏 Bootstrap 模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29584172/