显示引导程序模式仅适用于移动设备而不适用于台式机

Question

我有关于移动设备与台式机上引导程序模式的讨厌问题。

所以问题会很短：

我怎样才能​​并启用适用于移动/平板电脑？

Here is a small js for tests:

Answer 1

可以使用responsive utilities类。在你的情况，你应该在模式对话框

<div class="modal fade hidden-lg hidden-md" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

Answer 2

有几种方法来检查，如果你是在移动使用.hidden-md或.hidden-md类。你可以read more here。

在这个例子中我只是用屏幕的width，并在此基础上决定是否显示模态与否：

$('#myModal').on('show.bs.modal', function (e) { 
    if (window.innerWidth < 800) { 
    return e.preventDefault(); 
    } 
}) 

这里是更新到您的jsfiddle：
http://jsfiddle.net/1aeur58f/28/

Answer 3

你可以在html中使用.hidden-lg类。检查下面的代码，它会隐藏在大型设备的股利。 参考 - Bootstrap Responsive Utilities

jsfiddle

<div class="panel panel-warning hidden-lg" id="mymodal" data-toggle="modal" data-target="#myModal"> 
    <div class="panel-body"> 
    <h3>click on panel to open the modal</h3> 
    </div> 
</div> 
<!-- Modal --> 
<div class="modal fade hidden-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
    <div class="modal-body"> 
    ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div>