Css 如何将引导模式保持在移动视口的底部-对于桌面，引导模式是右下角，但在移动视口中保持在顶部

我试图在桌面视口的右下角显示引导模式，在移动设备的底部居中显示引导模式

我使用的位置：固定，底部：0；它适用于桌面视口，但“我的模态”在移动设备中显示顶部居中，而不是底部

关于使用媒体查询或其他方式将移动视口的“我的模式”保持在底部，有什么建议吗

谢谢你抽出时间

我认为我需要在div中包装模式，或者使用媒体查询在移动视口中定位模式，但除了在底部显示移动视口的引导模式外，我还无法在当前代码之外的任何代码中正常工作，该代码满足我的所有要求

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>@media only screen and (min-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
 @media only screen and (max-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
}</style>


<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
 <p>Some text in the modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>

 </div>
</div>


<script> $(window).load(function(){
 $('#myModal').modal('show');
 });
$(function(){
 $('#myModal').on('show.bs.modal', function(){
 var myModal = $(this);
 clearTimeout(myModal.data('hideInterval'));
 myModal.data('hideInterval', setTimeout(function(){
 myModal.modal('hide');
 }, 3000));
 });
});
</script>

@仅介质屏幕和（最小宽度：768px）{
.modal.modal对话框{
位置：固定；
底部：0；
右：0；
宽度：自动；
利润率：10px；
}
@仅介质屏幕和（最大宽度：768px）{
.modal.modal对话框{
位置：固定；
底部：0；
右：0；
宽度：自动；
利润率：10px；
}
}
&时代；
模态头
模态中的一些文本

接近
$（窗口）。加载（函数（）{
$（'myModal'）.modal（'show'）；
});
$（函数（）{
$（'#myModal'）.on（'show.bs.modal'，function（）{
var myModal=$（此值）；
clearTimeout（myModal.data（'hideInterval'））；
myModal.data（'hideInterval'，setTimeout（函数（）{
myModal.modal（'hide'）；
}, 3000));
});
});

---

到目前为止，我无法在移动视口中有效地将模式锁定到底。

通过阅读媒体查询解决。

通过阅读媒体查询解决。

我将此应用于我的模式，但问题仍然存在。这是否是引导不可避免的问题？开始认为我需要为桌面和移动设备提供单独的模式le视口。我将此应用于我的模式，但问题仍然存在。这是否是bootstrap不可避免的问题？开始认为我需要为桌面和移动视口提供单独的模式。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>@media only screen and (min-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
 @media only screen and (max-width: 768px) {
 .modal .modal-dialog {
 position:fixed;
 bottom: 0;
 right:0;
 width:auto;
 margin: 10px;
 }
}</style>


<div id="myModal" class="modal fade" role="dialog">
 <div class="modal-dialog">

 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal">&times;</button>
 <h4 class="modal-title">Modal Header</h4>
 </div>
 <div class="modal-body">
 <p>Some text in the modal.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
 </div>

 </div>
</div>


<script> $(window).load(function(){
 $('#myModal').modal('show');
 });
$(function(){
 $('#myModal').on('show.bs.modal', function(){
 var myModal = $(this);
 clearTimeout(myModal.data('hideInterval'));
 myModal.data('hideInterval', setTimeout(function(){
 myModal.modal('hide');
 }, 3000));
 });
});
</script>